如何在React native中正确使用导航

提问于 2024-05-02T12:16:32+08:00

浏览次

1

我刚开始使用React Native，目前我正在尝试学习如何构建一个简单的移动应用程序（在Andriod模拟器上进行测试） . 我现在有两个屏幕/场景（Home和Graph） . 它应该是这样的：header nav. design

我一直在网上搜索，但似乎无法找到如何实现这种 Headers 导航的最佳方式 - >当按下图形图标时：主屏幕上的VIEW需要滑动到左边（屏幕外）和graphVIEW需要从屏幕右侧进入（就像动画一样） . 我看过react-navigation选项卡/堆栈，但它们似乎都有固定的布局等 .

有人可以帮我这个或者指出我正确的方向吗？

非常感谢你！

1 回答

1
我希望这是你想要的......

每个屏幕都有自己的navigationOptions，有助于配置它的呈现方式 . 从v1.0.0-beta.9开始，导航选项现在可以是一个接收屏幕组件可用的相同道具的功能 .

在主屏幕中添加navigationOptions . 现在设置自定义headerRight，您的图形图像包含在一些可触摸的项目内，并将navigation.navigate挂钩到onPress，如下所示 .
```
static navigationOptions = ({ navigation, screenProps }) => ({
 title: 'Home',
 headerRight:(
  <TouchableHighlight onPress={() => navigation.navigate('GraphScreen')} >
   <Image source={require('./my-graph-icon.png')} />
  </TouchableHighlight>
 ) 
});
```
注意：对于添加了屏幕的制表符和堆栈导航器，navigationOptions列表是不同的，上面的内容应该适用于堆栈导航器 .

检查React-Navigation文档以获取导航选项here
回复于 2024-05-02T12:16:32+08:00

相关问题