Question

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

我一直在网上搜索，但似乎找不到如何实现这种标题导航的最佳方法 - ＆gt;按下图形图标时：主屏幕上的VIEW需要向左滑动（在屏幕外），并且graphVIEW需要从屏幕右侧进入（如动画）。我已经查看了反应导航选项卡/堆栈，但它们似乎都有固定的布局等。

有人可以帮我解决这个问题，还是指出我正确的方向？

非常感谢！

Answer 1

我希望这就是你要找的......

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

在主屏幕中添加navigationOptions。现在设置Custom 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列表不同，上面的内容适用于堆栈导航器。

检查导航选项here

的React-Navigation文档

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

1 个答案: