React Native 0.44 - 堆栈导航器示例

问题描述：

我正在尝试创建我的React Native应用的Android版本，但我遇到了围绕Android导航器的问题。React Native 0.44 - 堆栈导航器示例

download sample code

复制到https://*.com/questions/44297787/pass-data-from-one-scene-to-another-in-reactnaive – Marius

哪些代码写入？给代码比解决问题 –

@NidhiPatel更新示例代码请解决问题 – Ravindhiran

答

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

我已经做了这个发生在你的代码和它的作品。

感谢Nidhi Patel你的代码工作正常。 – Ravindhiran

如何实现自定义后退按钮操作？ – Ravindhiran

this.props.navigation.pop（）;不工作 – Ravindhiran

答

首先创建一个像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

和它那么简单。欢呼

你能分享我你测试过的示例应用吗？ – Ravindhiran

@Ravindhiran： - 这非常简单，并且可以正常使用我的app.just创建一个包含两个或更多屏幕的演示项目，您将可以使用StackNavigator进行导航。但是，如果我有时间，我会做一个演示和github。 – Dpkstr

请参考此网址：https://ufile.io/6c4yz但总是出现错误，我不知道我做错了什么。 – Ravindhiran

React Native 0.44 - 堆栈导航器示例

相关推荐