react native 布局注意点

Posted 2020-08-22 雪昀

一、react native中很多是ES6语法。

1行。表示是js的严格模式。

‘use strict’;
严格模式中变量必须先声明，然后赋值、定义等；
还有就是this的绑定。

2行到8行。导入依赖，可以理解为java中import XX.react-native.React;和import XX.react-native.React.AppRegistry;这种。

9行。自定义组件，组件是React Native的基本元素，可以类比Activity。

10行到24行。render()方法，我的理解是渲染页面用的，里边的xml和layout类似，都是用来布局的。

26行到43行。通过StyleSheet.create()方法，生成布局所需的属性集合。在render()中的<View/>等添加style属性就可以了。类比android中每个View的属性，都是通过style来实现，我们创建的属性集合便是style集合。

44行。注册自定义组件。

 

二、react native中的点击事件一般用的是Touchable组件

  其中常用的是TouchableHighlight 与TouchableOpacity  

TouchableHighlight  是背景透明度的变化

TouchableOpacity  文本或图片自身的透明度变化

注意：Touchable 组件系列都只能包含一个子组件，也就是说你想多个，可以嵌套View组件来实现。如：

 

<TouchableHighlight >  
      <View>
            <Text> t1 </Text>  
    <Text> t2 </Text>  
      </View>
</TouchableHighlight>

 

 三、页面跳转

 

首先要进行页面跳转控制器的配置，如下：

   

render() {
  return (
    <Navigator
      initialRoute={{id: ‘Page‘}}
      renderScene={this.actionTo}/>
  );
},
actionTo(route, navigator){
  switch (route.id) {
    case ‘Page‘:
      return (<Page navigator={navigator}/>);
    case ‘Page2‘:
      return (<Page2 navigator={navigator}/>);
  }
}

  Navigator就是页面跳转控制器，initialRoute指的是初始页面，renderScene是页面跳转时回调的方法，这里就是actionTo方法。

    actionTo方法，便是通过route的属性，来跳转不同的页面，可以这样理解。

 

  接下来需要页面跳转时，调用如下方法即可

 

 this.props.navigator.push({
   id: ‘Page2‘,
 });