Question

我正在尝试从我正在观看的教程中构建一个简单的应用程序。

本教程现在大约有5个月的历史，并使用旧的React Navigator方法导航，如下面的代码所示。

所以我尝试使用新的React Navigation库，但我找不到任何方法来获取下面的代码以适应新的React Navgation方法。事实上，我真的不知道从哪里开始。我阅读了reactnavigation.org上的介绍文档，但它有点压倒性。

我想知道是否有人可以指出我正确的方向。

谢谢！

  <Navigator
    ref = {( ref ) => this._navigator = ref }
    configureScene = { this.configureScene.bind( this )}
    renderScene = { this.renderScene.bind( this )}
  />


 renderScene(route, navigator) {
   switch(route) {
     default: {
       return null;
     }
   }
 }
 configureScene(route, routeStack) {
   return Navigator.SceneConfig.PushFromRight;
 }

Answer 1

首先，添加您的导入：

import {
  StackNavigator
} from 'react-navigation';

我们说你的应用包含两个屏幕，screen_1＆amp; screen_2

（此代码未经过测试，如果出现任何编译错误则进行调试）

class Screen_1 extends Component{
    render(){
        return(
            <View flex={1} justifyContent="center" alignItems="center" >
                <TouchableOpacity onPress={this.navigateToNextScreen.bind(this)}>
                    <Text>Screen 1</Text>
                </TouchableOpacity>
            </View>
            )
    }

    navigateToNextScreen(){
        this.props.navigation.navigate("SecondScreen")
        // notice that the "SecondScreen" is the name of the component 
        // Screen_1 in the AppStack
    }
}

class Screen_2 extends Component{
    render(){
        return(
            <View flex={1} justifyContent="center" alignItems="center">
                <Text>Screen 2</Text>
            </View>
        )
    }
}

您可以按如下方式创建stackNavigator组件：

const AppStack = StackNavigator({
    FirstScreen : {
        screen : Screen_1,
        navigationOptions : {
            title : 'Screen 1'
        }
    },
    SecondScreen : {
        screen : Screen_2,
        navigationOptions : {
            title : 'Screen 2'
        }
    }
})

然后您可以将AppStack用作任何其他组件。

我甚至可以相信您可以在您的react-native Navigator的renderScene中使用它，如下所示：

renderScene(route, navigator) {
   switch(route) {
     default: {
       return (<AppStack />);
     }
   }
 }

我真的建议你youtube tutorial,它让我在不到二十分钟内完成并运行。

从react-native Navigator迁移到React Navigation

1 个答案: