react native 布局注意點

標籤：react   create   touch   mouseover   end   gis   font   reg   route   

一、react native中很多是ES6文法。1行。表示是js的strict 模式。

‘use strict’;
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 布局注意點