React Native 0.44 - пример стекового навигатора

Question

Я пытаюсь создать Android-версию своего приложения React Native, но у меня возникают проблемы с навигатором Android-навигатора.

скачать образец кода

Answer 1

В файле 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;

Я сделал эти изменения в вашем коде и его работах.

Answer 2

Сначала создайте файл как 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>
        );
      }
    }

Вы можете выкопать больше здесь

и это так просто. ура