React Native 0.44 -- Stack Navigator 示例

Question

我正在尝试创建我的 React Native 应用程序的 Android 版本，但我无法理解 Android 导航器。

Answer 1

首先创建一个类似appNav.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;

然后在index.android.js

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

这样使用，在splash.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

就这么简单。干杯

Answer 2

您在 AppNav 文件中输入了错误的导入代码，请执行以下操作 AppNav.js

AppNav.js

import Splash from './Splash';
import Home from './Home';
import Login from './Login';
import Register from './Register';

第二个问题是您还没有导出文件。在所有文件中添加最后一行

Home.js

export default Home;

Splash.js

export default Splash;

Login.js

export default Login;

Register.js

export default Home;

我已对您的代码及其作品进行了此更改。

React Native 0.44 -- Stack Navigator 示例

React Native 0.44 -- Stack Navigator example

android

react-native

react-native-android