1，安装
- 安装node.js:https://nodejs.org/download/
- 安装命令行工具：npm install -g react-native-cli,
- 创建一个空项目：重启nodejs command，react-native init HelloWorld
- react-native run-android
- 环境 vsc安装插件ext install vscode-react-native https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native
- adb reverse tcp:8081 tcp:8081
- 查看logcat :adb logcat *:S ReactNative:V ReactNativeJs:V
- react-native start 启动react-native服务
2,基本的东西
- 代码模块
Require：引入模块
React.createClass创建组件类
Render方法渲染试图
JSX & XML DOM
AppRegistry注册应用入口
- css相关
StyleSheet.create创建样式
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
- Image resizeMode
contain模式自适应宽高，给出高度值即可
cover铺满容器，但是会做截取。默认
stretch铺满容器，拉伸
- Flex布局相关
flex：比例1＋2+3
flexDirection: row or column
alignItems：水平居中
justifyContent: 垂直居中
- 组件生命周期（图片来自互联网）
getDefaultProps
getInitialState
componentWillMount
Render
componentDidMoun
componentWillUnmount
3，RN内部怎么引用控件
this.mView={};
<View ref={ ref=>{this.mView=ref;} }
4，发送命令给原生view
NativeModules.UIManager.dispatchViewManagerCommand( reactTag,commandId,arrary);
reactTag：对应原生view,android就是viewid。可通 ReactNative.findNodeHandle(this.refs.recycle)获取
commandId：命令id
arrary:json数组
5，StaticRenderer
render: function(): ReactElement<any> {
return this.props.render();
},
不是一个视图类其在render是还是调用子节点来render
6,更新RN到某个版本
npm install --save react-native@0.31.10
创建到某个版本react-native init HelloWorld2 --source react-native@0.31.0
7，判断是否在开发环境
__DEV__
8，判断平台
Platform.OS === 'android'
9， component强制刷新
this.forceUpdate();
10，js里引用变量
{`${this.state.rowId}`}
