首页 > 代码库 > react native 布局注意点

react native 布局注意点

2024-08-25 09:06:17   219人阅读

一、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‘,
 });

 

 
 

react native 布局注意点


联系
我们