react-native Q&A笔记

1，安装

1. 安装node.js:https://nodejs.org/download/
2. 安装命令行工具：npm install -g react-native-cli,
3. 创建一个空项目：重启nodejs command，react-native init HelloWorld
4. react-native run-android
5. 环境 vsc安装插件ext install vscode-react-native https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native
6. adb reverse tcp:8081 tcp:8081
7. 查看logcat :adb logcat *:S ReactNative:V ReactNativeJs:V
8. react-native start 启动react-native服务

2,基本的东西

1. 代码模块

Require：引入模块

React.createClass创建组件类

Render方法渲染试图

JSX & XML DOM

AppRegistry注册应用入口

1. css相关

StyleSheet.create创建样式

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

}

});

1. Image resizeMode

contain模式自适应宽高，给出高度值即可

cover铺满容器，但是会做截取。默认

stretch铺满容器，拉伸

1. Flex布局相关

flex：比例1＋2+3

flexDirection: row or column

alignItems：水平居中

justifyContent: 垂直居中

1. 组件生命周期（图片来自互联网）

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}`}