【REACT NATIVE 系列教程之五】Navigator(頁面導航)的基本使用與傳參

Zoila53P 8年前發布 | 34K 次閱讀 ReactNative 移動開發 React Native

今天介紹一種應用開發中常用的負責頁面切換及導航功能的組件：Navigator

一：Navigator

對于頁面導航其實主要功能就是：每個頁面都知道本身應該切換到哪個頁面，并且切到的頁面會記錄從哪里來，如果要返回的話，知道返回到哪個頁面。這一切都不需要再用邏輯管理！而且每個頁面之間也可以進行參數傳遞，很方便的組件。廢話不多說：先上示例代碼：

首先我們導入 Navigator 組件：

importReact, {
  ...
  Navigator,
  ...
} from 'react-native';

使用方式：

render() {
    return (
        <Navigator
            initialRoute={{ name: 'FirstPage', component: FirstPage }}
            configureScene={(route) => {
              return Navigator.SceneConfigs.HorizontalSwipeJump;
            }}
            renderScene={(route, navigator) => {
            letComponent = route.component;
            return <Component {...route.params} navigator={navigator}/>
            }} 
          />
  )}

上面的代碼，初始化了導航組件，且設置默認顯示頁面為 FirstPage，這里需要注意兩點：

1. 我們主要關注 Navigator 里 initialRoute 中的兩個參數：

name: 組件名

component: 組件Class名

Himi導入FirstPage時如下：

importFirstPagefrom './FirstPage'

所以 name 和 component 都填寫的為FirstPage

2. <Component {…route.params} navigator={navigator} />

上面這一行是將navigator作為props進行傳遞

3. Navigator.SceneConfigs.HorizontalSwipeJump

上面一行是設置頁面切換之間的動畫效果，更多效果查看源文件：

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

下面我們看下FirstPage.js :

importReact, {
  AppRegistry,
  Component,
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
} from 'react-native';
 
importSecondPagefrom './SecondPage';
 
 
class FirstPageextends React.Component {
 constructor(props) {
 super(props);
 this.state = { };
 
 }
 
  nextEvent(){
    const { navigator } = this.props;
    if(navigator) {
      navigator.push({
          name: 'SecondPage',
          component: SecondPage, 
          params: {
            titleText:''
          }
      })
    }
  }
  render() {
    return (
 <Viewstyle={styles.himiViewStyle} >
 <Text style={styles.himiTextStyle}>HimiReactNative 教程 </Text>
 
 <Viewstyle={styles.himiViewStyle}> 
 <TouchableHighlight
  underlayColor='#4169e1'
  onPress={this.nextEvent.bind(this)}  
  > 
    <Text style={styles.text} > 點擊我進入[SecondPage]個頁面 </Text>
 </TouchableHighlight>
 </View>
    </View>
  )} 
};
 
var styles = StyleSheet.create({
  text: {
    color:'#f00',
    fontSize:20,
  },
  himiViewStyle:{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  himiTextStyle:{
    color:'#f00',
    fontSize:30,
    marginTop:70,
  },
  
});
module.exports = FirstPage;

這里我們主要看 nextEvent 函數內容，

const { navigator } = this.props; 這一句是以props傳遞過來的navigator進行接收。

得到Navigator組件，可以利用其 push 與pop兩個函數進行切換下一頁面與回到上個頁面操作。

下面代碼段演示了如何切換到下一個頁面：

if(navigator) { //判斷是否正常接收到傳來的導航組件
    navigator.push({ //利用此函數進行切換到指定頁面
        name: 'SecondPage',//目標組件名
        component: SecondPage, //目標組件Class名
        params: { 
          titleText:''
        }
  })
}

還需要強調的是params，此參數是頁面切換時傳入下個頁面的參數書寫形式。

獲取時，直接 this.props.titleText 即可得到，簡單、方便。

下面代碼段演示如何返回上個頁面：

const { navigator } = this.props; 
if(navigator) {
  navigator.pop();
}

返回上一頁面就十分簡單了，不多贅述了。

Himi這里為了演示效果，所以下面把 ThreePage.js 也給出源碼：（最后附上動態效果圖）

importReact, {
  AppRegistry,
  Component,
  View,
  Text,
  Alert,
  StyleSheet,
  TouchableHighlight,
} from 'react-native';
 
exportdefault class threePageextends React.Component {
 constructor(props) {
 super(props);
 this.state = { };
 
 }
 
  backEvent(){
    const { navigator } = this.props;
    if(navigator) {
        navigator.pop();
    }
  }
  
  render() {
    return (
 <Viewstyle={styles.himiViewStyle} >
 <Text style={styles.himiTextStyle}> ThreePage </Text>
      
      <Viewstyle={styles.himiViewStyle}> 
        <TouchableHighlight
          underlayColor='#4169e1'
          onPress={this.backEvent.bind(this)}  
          > 
            <Text style={styles.text} >  返回[SecondPage]頁面 </Text>
        </TouchableHighlight>
      </View>
    </View>
  )} 
};
 
var styles = StyleSheet.create({
  text: {
    color:'#f00',
    fontSize:20,
  },
  himiViewStyle:{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  himiTextStyle:{
    color:'#f00',
    fontSize:30,
    marginTop:70,
  },
  
});

運行效果圖：（點擊查看動態效果）