检查React Native文档后,我仍然不了解创建视图和在不同组件之间导航的最佳方法 .
我不想使用任何外部组件,如:
https://github.com/Kureev/react-native-navbar/
https://github.com/23c/react-native-transparent-bar
https://github.com/superdami/react-native-custom-navigation
我不需要导航栏,我只想设置视图并向左滑动,向右滑动视图,仅此而已 .
我知道是基本的东西,但我找不到任何有用的例子 .
拜托,有人可以帮帮我吗? https://rnplay.org/中的任何功能示例?
谢谢 .
3 回答
UPDATE 04/2018 :
自我的第一个答案以来,情况发生了变化,今天两个大型图书馆与导航相关:反应导航和反应原生导航 .
我将为react-navigation编写一个示例,这是一个易于使用的库,并且由来自社区的认真人员进行完整的JS维护 .
首先安装库:
要么
然后在你的app入口点(index.js):
你可以看到我们将一个对象传递给StackNavigator,这是我们所有的屏幕配置,这里是一个配置示例:
现在应用程序知道我们得到的每个屏幕 . 我们可以简单地告诉“导航”功能进入我们的设置屏幕 . 让我们看一下我们的主屏幕:
如您所见,导航将保湿道具 . 从这里你可以做出你想要的东西 .
转到库文档以查看您可以执行的所有操作:更改 Headers 类型, Headers ,导航类型,...
PREVIOUS ANSWER :
看这个例子:https://github.com/h87kg/NavigatorDemo
它是有用的,并且是一个写得很好的Navigator示例,比我刚才写的更好,我想 .
主要看
LoginPage.js
和MainPage.js
之间的关系我找到了这个例子:https://rnplay.org/apps/HPy6UA
我写了一个关于它的教程:https://playcode.org/navigation-in-react-native/
理解React Native中的导航真的很有帮助:
我建议你使用react-navigation你可以看看Navigator Playground example
为iOS和Android构建的组件
在TabNavigator,DrawerNavigator和StackNavigator之间选择 .
实施CustomNavigator
开发自己的navigation views
在移动应用程序,带有服务器呈现的Web应用程序之间共享逻辑 .
Documentation非常直截了当
它是redux集成的 .
这太棒了!
将成为反应原生的官方导航器!
安装导航模块 .
在您的应用中导入它
......并导航