Question

如何连接三个或更多屏幕，为Android本机做反应并使用react navigator。

Answer 1

你的问题很不清楚，我只能假设你想要实现的目标。

为了确保我们在同一页面上，请确保在项目根目录中运行此命令npm install --save react-navigation。

现在，在app.js文件中，您必须从React-Navigation导入StackNavigator。

import { StackNavigator } from 'react-navigation';

然后您应该导入以后可以添加到StackNavigator的屏幕组件。为了这个例子，我导入了随机名称的随机文件。你想要三个或更多，所以让我们导入四个。

import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import NewsScreen from './screens/NewsScreen';
import SettingsScreen from './screens/SettingsScreen';

所有这些文件都位于screens文件夹中，该文件夹本身与app.js文件位于同一文件夹中。现在让我们创建StackNavigator。接下来的这些行会进入app.js。

const NavigationApp = StackNavigator({
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
    News: { screen: NewsScreen },
    Settings: { screen: SettingsScreen }
})

现在，您的app.js文件应如下所示。

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import NewsScreen from './screens/NewsScreen';
import SettingsScreen from './screens/SettingsScreen';

const NavigationApp = StackNavigator({
    Home: { 
        screen: HomeScreen,
        navigationOptions: {
            headerTitle: 'Home'
        }
    },
    Profile: { screen: ProfileScreen},
    News: { screen: NewsScreen},
    Settings: { screen: SettingsScreen}
})

export default class App extends Component {

    render() {
        return (
            <NavigationApp />
        );
    }

}

为了确保您能够获得我们史诗般旅程的全部体验，让我们创建一个带按钮的示例屏幕，让我们导航到另一个屏幕。我们说它是Home，我们有一个按钮可以让我们导航到Profile。

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

export default class HomeScreen extends Component {

    render() {
        const { navigate } = this.props.navigate
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <TouchableOpacity style={{color: 'steelblue'}} onPress={() => navigate('Profile')}>
                    <Text style={{fontSize: 12, color: 'white', padding: '10'}}>
                        Go to Profile screen
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }

}

我希望这可以帮助您继续完成您的项目，我真的建议您深入研究将来使用的库的文档，因为从长远来看它非常有用并且可以帮助您在许多方面做得更好。

React Native Connect三个或更多屏幕用于反应导航

1 个答案: