Question

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

onButtonPress(){
    alert("Prem")
}

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

Answer 1

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

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

onButtonPress(){
  Actions.JobDetails();
}

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

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

Answer 2

您可以使用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;

在react-native中使用路由

2 个答案: