用模板做网站/网站建设公司哪个好呀-专业网站定制开发

组件类型

View: 容器组件
Text: 文本组件
TouchableWithoutFeedback: 点击组件，默认不做点击响应，还有其他类型组件，比如TouchableHighlight FlatList: 列表组件
TextInput: 输入框组件，支持多行
ScrollView: 滚动区域组件
常用的大概就这些，对于组件，会有不同的用法，比如文字只能放在Text里使用，数组数据只有传到FlatList里才能正常使用，点击事件只有在Touch开头的容器里才会生效。引入方式，比如：
import { Text, View } from 'react-native'; 具体可以直接上官网：reactnative.cn/

触发事件

也是特定的组件才能触发的，比如onChangeText，规定只有TextInput组件触发
onPress：触摸
onLongPress: 长按
onSubmitEditing: 会在文本被提交后（用户按下软键盘上的提交键）调用

原生外援

如果你需要针对应用的某一部分特别优化，中途换用原生代码编写也很容易。想要应用的一部分用原生，一部分用React Native也完全没问题 —— Facebook的应用就是这么做的。

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { TheGreatestComponentInTheWorld } from './your-native-code';class SomethingFast extends Component {render() {return (<View><TheGreatestComponentInTheWorld /><Text>上面这个TheGreatestComponentInTheWorld组件完全可以使用原生Objective-C、Java或是Swift来编写 - 开发流程并无二致。</Text></View>);}
}
复制代码

网络请求

Fetch 方法会返回一个Promise，这种模式可以简化异步风格的代码，需要注意的是，安全机制与网页环境有所不同：在应用中你可以访问任何网站，没有跨域的限制。

fetch('https://mywebsite.com/endpoint/', {method: 'POST',headers: {Accept: 'application/json','Content-Type': 'application/json',},body: JSON.stringify({firstParam: 'yourValue',secondParam: 'yourOtherValue',}),
});
复制代码

fetch api

var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {if (request.readyState !== 4) {return;}if (request.status === 200) {console.log('success', request.responseText);} else {console.warn('error');}
};request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();
复制代码

request send

Props和State

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

Fixed 尺寸 & Flex 尺寸

export default class FlexDimensionsBasics extends Component {render() {return (// Try removing the `flex: 1` on the parent View.// The parent will not have dimensions, so the children can't expand.// What if you add `height: 300` instead of `flex: 1`?<View style={{flex: 1}}><View style={{flex: 1, backgroundColor: 'powderblue'}} /><View style={{flex: 2, backgroundColor: 'skyblue'}} /><View style={{flex: 3, backgroundColor: 'steelblue'}} /></View>);}
}
复制代码