在React Native Android中的视图之间导航示例? [英] Example of Navigation between views in React Native Android?
问题描述
在检查React Native文档后,我仍然不了解创建视图和在不同组件之间导航的最佳方法。
After check the React Native documentation, I still don't understand the best way to create views and navigate between different components.
我不想使用任何外部组件,如:
I don't want to use any external components like:
https://github.com / Kureev / react-native-navbar /
https://github.com/23c/react-native-transparent-bar
https://github.com/superdami/react-native-custom-navigation
我不喜欢我需要一个导航栏,我只想设置视图并向左滑动,向右弹出一个视图,仅此而已。
I don't need a Navigation bar, i just want to set views and slide left, right o pop a view, nothing more.
我知道是基本的东西,但我可以找不到任何有用的例子。
I know is something basic, but I can't find any helpful example.
请有人帮我吗? https://rnplay.org/ 中的任何功能示例?
Please, anyone can help me? Any functional example in https://rnplay.org/?
谢谢。
推荐答案
更新04/2018:
自我的第一个答案以来情况发生了变化,今天两个大型库与导航相关:反应导航和反应原生导航。
Things have change since my first answer, and today two massive libraries are relevant for navigation : react-navigation and react-native-navigation.
我将写一个例子反应导航,这是一个易于使用的库和由社区的认真人员完整的JS维护。
I will wrote an example for react-navigation which is an easy to use library and full JS maintain by serious people from the community.
首先安装库:
yarn add react-navigation
或
npm install --save react-navigation
然后在你的app入口点(index.js):
Then in your app entry point (index.js) :
import Config from './config';
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
export const AppNavigator = StackNavigator(Config.navigation);
AppRegistry.registerComponent('appName', () => AppNavigator);
你可以看到我们将一个对象传递给StackNavigator,它是我们所有的屏幕配置,这里是一个配置示例:
You can see that we pass an object to the StackNavigator, it's all ours screens configuration, here is an example of configuration :
import HomeScreen from "./HomeScreen";
import SettingsScreen from "./SettingsScreen";
const Config = {
navigation: {
Home: {
screen: HomeScreen
},
Settings: {
screen: SettingsScreen,
}
}
}
现在app知道我们得到的每个屏幕。我们可以简单地告诉导航功能进入我们的设置屏幕。
让我们看主屏幕:
Now the app know each screen we got. We can simply tell the "navigate" function to go to our Setting Screen. Let's watch our Home Screen :
class HomeScene extends Component {
constructor(props) {
super(props);
}
render () {
return (
<View>
<Button
title="Go to Settings"
onPress={() => this.props.navigation.navigate('Settings')}
/>
</View>
);
}
}
如你所见,导航将保湿道具。从这里你可以做你想要的。
As you can see, the navigation will hydrate the props. And from here you can make what you want.
转到图书馆文档,看看你能做的所有:改变标题类型,标题,导航类型,.. 。
Go to the library documentation to see all you can do : change the header type, the title, navigation type, ...
以前的答案:
观看此示例:
< a href =https://github.com/h87kg/NavigatorDemo =nofollow noreferrer> https://github.com/h87kg/NavigatorDemo
这是有用的,并且编写得很好的Navigator示例,比我刚才写的更好。我想。
It's useful and a well written Navigator example, better than the one above you just wrote, I think.
主要观察之间的关系LoginPage.js
和 MainPage.js
这篇关于在React Native Android中的视图之间导航示例?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!