在 react-native 中使用路由答案

【问题标题】：Using Routing in react-native在 react-native 中使用路由
【发布时间】：2018-06-12 20:44:50
【问题描述】：

我有如下所述的按钮，并且在项目的同一文件夹中还有另一个名为 JobDetails 的页面。当我单击“下一步”按钮时，我需要显示该 JobDetails 页面。我已经添加了带有警报功能的 onButtonPress，它工作正常。我不确定如何在使用路由单击按钮时打开下一页。

onButtonPress(){
    alert("Prem")
}

<TouchableOpacity onPress={this.onButtonPress.bind(this)} style={styles.buttonStyle} >
    <Text style={styles.nextPage}>
        Next
    </Text>
</TouchableOpacity>

【问题讨论】：

标签： reactjs react-native routing react-native-router-flux

【解决方案1】：

您可以使用来自react-navigation 的Stack Navigator 实现此目的

安装： npm install --save react-navigation

示例：

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';

class MyHomeScreen extends React.Component {

    static navigationOptions = {
        title: 'Home'
    }


    onButtonPress(){
        this.props.navigation.navigate('JobDetails'); // navigate to JobDetails screen!
    }


    render() {
        return (
            <TouchableOpacity onPress={this.onButtonPress.bind(this)} style={styles.buttonStyle} >
                <Text style={styles.nextPage}>
                    Next
                </Text>
            </TouchableOpacity>
        );
    }
}

class JobDetailsScreen extends React.Component {

    static navigationOptions = {
        title: 'Job Details'
    }

    render() {
        return (
            <View>
                <Text>I'm job screen!</Text>
            </View>
        );
    }
}

const ModalStack = StackNavigator({
    Home: {
        screen: MyHomeScreen
    },
    JobDetails: {
        screen: JobDetailsScreen
    }
});

export default ModalStack;

【讨论】：

谢谢，但我遇到了错误“this.props.navigation.navigate undefined is not an object”
用onPress={() => this.props.navigation.navigate('JobDetails')}替换onPress={this.onButtonPress.bind(this)}

【解决方案2】：

react-native-router-flux 非常简单，只需这样做：

import { Actions } from 'react-native-router-flux';

onButtonPress(){
  Actions.JobDetails();
}

确保您的 Scene 密钥正确（在您的情况下为 JobDetails）。

<Scene key="JobDetails" component={JobDetails} />

【讨论】：