React Native 的 Navigator 組件使用方式

React Native的編程思想類似于iOS, 導航欄也使用Navigator作為標識, 類似于Android的ActionBar. 導航欄作為最重要的應用組件之一, 除了處理頁面導航功能以外, 還會提供頁面棧的管理, 管理頁面的跳入和跳出. 本文介紹一下 Navigator 組件的使用方式.

關于React Native項目的啟動, 參考1, 參考2.

簡單使用

Navigator

添加 Navigator 的組件<Navigator/>. 設置方法: 初始化路由(initialRoute), 配置場景動畫(configureScene), 渲染場景(renderScene). 初始化路由(initialRoute), 使用FirstPage頁面作為首頁.

// 主模塊
class SimpleView extends Component {
  // ...
  render() {
    return (
      <Navigator
        style={{flex:1}}
        initialRoute={{component: FirstPage}}
        configureScene={this.configureScene}
        renderScene={this.renderScene}/>
    );
  }
}

配置場景動畫(configureScene): 根據路由的type屬性, 判斷使用的動畫樣式, 底部彈出或右側彈出.

  /**
   * 配置場景動畫
   * @param route 路由
   * @param routeStack 路由棧
   * @returns {*} 動畫
   */
  configureScene(route, routeStack) {
    if (route.type == 'Bottom') {
      return Navigator.SceneConfigs.FloatFromBottom; // 底部彈出
    }
    return Navigator.SceneConfigs.PushFromRight; // 右側彈出
  }

渲染場景(renderScene): 使用動態加載組件的方式. 設置加載頁面的navigator參數, 其余使用route.passProps屬性傳遞其他參數.

  /**
   * 使用動態頁面加載
   * @param route 路由
   * @param navigator 導航器
   * @returns {XML} 頁面
   */
  renderScene(route, navigator) {
    return <route.component navigator={navigator}  {...route.passProps} />;
  }

也可以使用靜態加載組件, 需要預定義組件, 沒有動態加載靈活.

  /**
   * 渲染場景, 通過不同參數, 設置不同頁面
   * @param route 路由, 場景信息
   * @param navigator 導航器
   * @returns {XML} 頁面
   */
  renderScene(route, navigator) {
    if (route.name == 'FirstPage') {
      return <FirstPage navigator={navigator} {...route.passProps}/>
    } else if (route.name == 'SecondPage') {
      return <SecondPage navigator={navigator} {...route.passProps}/>
    }
  }

第一頁

FirstPage組件: 包含導航欄標題和兩個跳轉按鈕. 提供兩種跳轉動畫, 右出和底部. 點擊按鈕調用_navigate()方法, 跳轉到第二頁.

// 第一頁. 使用Component可以自動生成注釋, 符合標準
class FirstPage extends Component {

  // ...

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.heading}>
          <Text style={styles.headText}>
            {'第一頁'}
          </Text>
        </View>
        <TouchableOpacity
          style={styles.button}
          onPress={()=>this._navigate('你好! (來源第一頁:右出)')}>
          <Text style={styles.buttonText}>
            {'跳轉至第二頁(右出)'}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button}
          onPress={()=>this._navigate('你好! (來源第一頁:底出)', 'Bottom')}>
          <Text style={styles.buttonText}>
            {'跳轉至第二頁(底部)'}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

也可以使用var FirstPage = React.createClass()創建組件, 但沒有使用繼承Component方式規范, 不能自動生成注釋.

_navigate()方法: 導航跳轉, 調用navigator.push()方法. 傳遞參數passProps的name屬性, type動畫類型, component跳轉組件.

  /**
   * 給Navigator傳遞參數.
   * @param name 參數
   * @private
   */
  _navigate(name, type = 'Normal') {
    this.props.navigator.push({
      component: SecondPage,
      passProps: {
        name: name
      },
      type: type
    })
  }

下劃線表示私有方法, 類似Java的private限定符.

第二頁

SecondPage組件: 第二頁, 跳出返回第一頁. 調用navigator.pop()方法, 使用當前頁面出棧, 顯示上一個棧內頁面.

// 第二頁, 點擊跳出返回第一頁
class SecondPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.heading}>
          <Text style={styles.headText}>
            第二頁: {this.props.name}
          </Text>
        </View>
        <TouchableOpacity
          style={styles.button}
          onPress={()=>this.props.navigator.pop()}>
          <Text style={styles.buttonText}>
            返回上一頁
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Navigator的主要功能, 是管理頁面棧, 控制頁面的跳入跳出.

統一導航欄

對于應用而言, 需要統一的導航欄, Navigator 組件也提供導航欄的定制.

Navigator

與上文類似, 額外添加navigationBar的屬性, 自定義設置導航欄, 保持所有頁面的導航欄一致. 屬性添加<NavigationBar/>標簽, 通過routeMapper控制導航欄的功能和樣式.

// 主模塊
class UniformView extends Component {
  //...

  render() {
    return (
      <Navigator
        style={{flex:1}}
        initialRoute={{name: 'FirstPage', component: FirstPage}}
        configureScene={this.configureScene}
        renderScene={this.renderScene}
        navigationBar={
          <Navigator.NavigationBar
            style={styles.navContainer}
            routeMapper={NavigationBarRouteMapper}/>}
        />
    );
  }
}

NavigationBarRouteMapper

NavigationBarRouteMapper: 導航欄路由映射器, 設置左鍵LeftButton, 右鍵RightButton, 標題Title.

// 導航欄的Mapper
var NavigationBarRouteMapper = {
  // 左鍵
  LeftButton(route, navigator, index, navState) {
    // ...
  },
  // 右鍵
  RightButton(route, navigator, index, navState) {
    // ...
  },
  // 標題
  Title(route, navigator, index, navState) {
    return (
      <View style={styles.navContainer}>
        <Text style={styles.title}>
          應用標題
        </Text>
      </View>
    );
  }
};

左鍵LeftButton: index屬性表示當前頁面的索引, 通過判斷index屬性, 獲知棧內是否有其他頁面, 判斷后退按鈕是否顯示. 點擊調用navigator.pop()出棧.

  // 左鍵
  LeftButton(route, navigator, index, navState) {
    if (index > 0) {
      return (
        <View style={styles.navContainer}>
          <TouchableOpacity
            underlayColor='transparent'
            onPress={() => {if (index > 0) {navigator.pop()}}}>
            <Text style={styles.leftNavButtonText}>
              后退
            </Text>
          </TouchableOpacity>
        </View>
      );
    } else {
      return null;
    }
  },

右鍵RightButton: 點擊調用路由(route)的onPress()方法, 提示信息. 根據路由的rightText屬性添加顯示文字.

  // 右鍵
  RightButton(route, navigator, index, navState) {
    if (route.onPress)
      return (
        <View style={styles.navContainer}>
          <TouchableOpacity
            onPress={() => route.onPress()}>
            <Text style={styles.rightNavButtonText}>
              {route.rightText || '右鍵'}
            </Text>
          </TouchableOpacity>
        </View>
      );
  },

第一頁/第二頁

第一頁與第二頁與上文類似, 當第一頁跳轉時, 傳遞的路由信息有些變化, 控制第二頁與導航欄的顯示信息.

  // 填出提示框
  onPress() {
    alert("我是Spike!");
  }

  /**
   * 跳轉頁面至SecondPage
   * @param name 傳遞參數
   * @param type 動畫類型
   */
  gotoNext(name, type = 'Normal') {
    this.props.navigator.push({
      component: SecondPage,
      passProps: {
        id: name
      },
      onPress: this.onPress,
      rightText: 'ALERT!',
      type: type
    })
  }

React Native 路由的基本功能就是這些, 控制頁面的切換, 控制導航欄的功能. 導航欄作為應用最重要的組件之一, 一定要熟練掌握.

OK, that's all ! Enjoy it!

來源：https://github.com/SpikeKing/WclNavigator