react native 布局注意点

时间：2016-12-05 16:50:46 阅读：130 评论：0 收藏：0 [点我收藏+]

标签：react create touch mouseover end gis font reg route

一、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 布局注意点

标签：react create touch mouseover end gis font reg route

原文地址：http://www.cnblogs.com/leyan/p/6134335.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行