React Native 0.44 - 堆棧導航器示例

Question

我正在嘗試創建我的React Native應用的Android版本，但我遇到了圍繞Android導航器的問題。

download sample code

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); 

使用它像這樣，在飛濺.js

在渲染（）函數中添加此使用的導航

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

和它那麼簡單。 歡呼