Question

所以我一直试图让反应原生导航我在网上看了很多例子，但我仍然不太明白我做错了什么。

我的例子基于我在Stackoverflow上找到的另一个例子：

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

我无法弄清楚如何将变量传递到导航栏中，例如'route.title'和'route.leftButton'。

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

我查看了文档，我认为对我来说完全理解可能太简短了。对此有任何指导意见。

感谢。

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>
  }
};

希望这有助于您朝着正确的方向前进。

React-Native导航栏如何工作

1 个答案: