React Native 0.44——堆栈导航器示例

我正在尝试创建 React Native 应用程序的 Android 版本，但在使用 Android 导航器时遇到问题。

下载示例代码 https://ufile.io/lr8x5

首先创建一个文件，例如应用导航.js

import { StackNavigator } from 'react-navigation';

import Splash from './splash.js';
import Home from './home.js';
import Login from './login.js';
import Register from './register.js';
export const AppNav = StackNavigator({
    Splash: { screen: Splash },
    Home: { screen: Home },
    Login: { screen: Login },
    Register: { screen: Register }
});

export default AppNav;

then in 索引.android.js

import React from 'react';
import { AppRegistry } from 'react-native';
import AppNav from './components/appnav.js'
AppRegistry.registerComponent('AwesomeApp', () => AppNav);

像这样使用它，在飞溅.js

在 render() 函数中添加它以使用导航

const { navigate } = this.props.navigation;

现在您可以在任何按钮下使用它，例如

<Button
          onPress={() => navigate('Home')}
          title="Go Home"
        />

这应该看起来像...

    class Splash extends Component {
      static navigationOptions = {
        title: 'Splash', //header:null <= if you want to hide the header
      };
      render() {
        const { navigate } = this.props.navigation;
        return (
          <View>
            <Text>Hello, This is splash</Text>
            <Button
              onPress={() => navigate('Home')}
              title="Go Home"
            />
          </View>
        );
      }
    }

你可以挖掘更多here https://reactnavigation.org/docs/intro/

就这么简单。 干杯