React-Native 导航栏是如何工作的

Question

所以我一直在尝试获取 react-native 导航，我在网上查看了很多示例，但我仍然不太明白我做错了什么。

我的示例大致基于我在 Stackoverflow 上找到的另一个示例：

react-native Navigator.NavigationBar - where are the docs?

我无法弄清楚如何将变量传递到导航栏中以获取诸如“route.title”和“route.leftButton”之类的值。

当我第一次加载应用程序时，一切似乎都很好。它从 Navigator.initialRoute 属性中获取数据，但是如果我在调试模式下单击左或右按钮并检查路由的值，我可以看到它是一个仅包含单个属性“id”的对象设置为“未定义”。

我查看了文档，我认为它可能太简短以至于我无法完全理解。对此的任何指导表示赞赏。

谢谢。

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    TouchableOpacity
} from 'react-native';

var NavigationBarRouteMapper = {
    LeftButton: function( route, navigator, index, navState ){
        return(
            <TouchableOpacity onPress={() => navigator.pop()}>
                <Text>{ route.leftButton }TestLeft</Text>
            </TouchableOpacity>
        )
    },
    Title: function( route, navigator, index, navState ){
        return(
            <Text>{ route.title }</Text>
        )
    },
    RightButton: function( route, navigator, index, navState ){
        debugger;
        return(
            <TouchableOpacity onPress={() => navigator.push({id: 'PageTwo', title:'page222'})}>
                <Text>{ route.rightButtonAction }TestRight</Text>
            </TouchableOpacity>
        )
    }
}

var PageOne = React.createClass({
    render(){
        return (
            <View>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
                <Text>you are on page 1</Text>
            </View>
        )
    }
});

var PageTwo = React.createClass({
    render(){
        return (
            <View>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
                <Text>you are on page 2</Text>
            </View>
        )
    }
});

class testApp extends Component {

    renderScene( route, nav ) {
        switch (route.id) {
            case 'PageOne':
                return <PageOne navigator={ nav } leftButton={ "Back" } title={ "PageOne111" } rightButtonAction={"PageTwo"} />
            case 'PageTwo':
                return <PageTwo navigator={ nav } leftButton={ "Back" } title={ "PageTwo222" } rightButtonAction={"PageOne"} />;
        }
    }

    render() {
        return (
            <Navigator
                initialRoute={{ id: 'PageOne', title: 'PageOne' }}
                renderScene={ this.renderScene }
                configureScene={( route ) => {
                  if ( route.sceneConfig ) {
                    return route.sceneConfig;
                  }
                  return Navigator.SceneConfigs.FloatFromRight;
                }}
                navigationBar={
                  <Navigator.NavigationBar
                    routeMapper={ NavigationBarRouteMapper }
                  />
                }
              />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

AppRegistry.registerComponent('testApp', () => testApp);

Answer 1

我建议阅读这篇文章，因为它看起来非常有用。它是从今年 2 月开始的，所以其中一些可能已经过时了。

https://medium.com/@dabit3/react-native-navigator-navigating-like-a-pro-in-react-native-3cb1b6dc1e30#.45yr7nycr

我认为它基本上归结为在NavigationBarRouteMapper的函数中访问路由和导航属性并使用这些属性来自定义值。

（从文章中复制的代码，以防它消失）

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    if(index > 0) {
      return (
        <TouchableHighlight
          underlayColor="transparent"
          onPress={() => { if (index > 0) { navigator.pop() } }}>
          <Text style={ styles.leftNavButtonText }>Back</Text>
        </TouchableHighlight>)
    } 
    else { return null }
  },
  RightButton(route, navigator, index, navState) {
    if (route.onPress) return (
      <TouchableHighlight
         onPress={ () => route.onPress() }>
         <Text style={ styles.rightNavButtonText }>
              { route.rightText || 'Right Button' }
         </Text>
       </TouchableHighlight>)
  },
  Title(route, navigator, index, navState) {
    return <Text style={ styles.title }>MY APP TITLE</Text>
  }
};

希望这将帮助您朝着正确的方向前进。