ios - 如何在另一个 React 组件中正确使用 TabNavigator
<p><p><strong>问题</strong> - 如何在另一个充当包装器组件的 React 组件中正确使用 <strong>React Navigation</strong> 的 TabNavigator 容器组件？</p>
<p><strong>我想要实现的目标</strong> - 基本上我希望 appbar 和 tabbar 都显示 - appbar 在顶部，tabbar (TabBarTop) 就在它下面，这是一种非常常见的设计模式。</p >
<p>我尝试了几种方法。</p>
<p><strong>方法#1</strong>(嵌套在 StackNavigator 中)</p>
<p><em>Tab.js</em></p>
<pre><code>export const Tab = TabNavigator({
Tab1: { screen: Tab1Container },
Tab2: { screen: Tab2Container }
}, {
tabBarComponent: TapBarTop,
tabBarPosition: 'top'
});
</code></pre>
<p><em>AppBar.js</em></p>
<pre><code>class AppBarComponent extends Component {
static navigationOptions = { header: null }
render() {
return (
<View>
*some more views, buttons blah blah here
</View>
)
}
}
export default AppBarComponent;
</code></pre>
<p>我在 StackNavigator 中使用它们，比如</p>
<pre><code>export default StackNavigator({
stack1: { screen: AppBarComponent },
stack2: { screen: Tab }
});
</code></pre>
<p>这导致在给定时间仅显示 1 个堆栈，这正是它的工作原理。而且我与 <code>initialRouteName</code> 没有任何关系。</p>
<p><strong>方法#2</strong>(包装在另一个组件中)</p>
<pre><code><View style={{ flex: 1 }}>
<AppBarComponent />
<Tab />
</View>
</code></pre>
<p>这相反显示两个组件，但 <em>this.props.navigation.navigate('somepath')</em> 或 <em>push()</em> 或 <em>pop()</em> 或
<em>replace()</em> 在内部和 .但是 this.props.navigation 及其方法都可以在这些组件中使用。</p>
<p>PS - 我正在使用 React Navigation v1 并在 iOS 上运行</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><h2>方法一的解决方案</h2>
<p>拥有一个只有一个屏幕的 <code>StackNavigator</code>，并在该屏幕中显示您的 <code>TabNavigator</code>。然后自定义<a href="https://v1.reactnavigation.org/docs/stack-navigator.html#header" rel="noreferrer noopener nofollow"><code>header</code></a>使用您的自定义 <code>AppBarComponent</code>。</p>
<blockquote>
<p><strong>header</strong></p>
<p>React Element or a function that given <code>HeaderProps</code> returns a React
Element, to display as a header. Setting to <code>null</code> hides header.</p>
</blockquote>
<p><strong>示例</strong></p>
<pre><code>export default StackNavigator({
stack: {
screen: Tab,
navigationOptions: {
header: (HeaderProps) => (<AppBarComponent headerProps={HeaderProps} />)
}
}
});
</code></pre>
<h2>方法2的解决方案</h2>
<p>您可以使用 <a href="https://v1.reactnavigation.org/docs/connecting-navigation-prop.html" rel="noreferrer noopener nofollow"><code>withNavigation</code></a> 包装不属于堆栈的组件HOC。</p>
<blockquote>
<p><code>withNavigation</code> is a higher order component which passes the
navigation prop into a wrapped Component. It's useful when you cannot
pass the navigation prop into the component directly, or don't want to
pass it in case of a deeply nested child.</p>
</blockquote>
<p><strong>示例</strong></p>
<pre><code>class AppBarComponent extends Component {
static navigationOptions = { header: null }
render() {
return (
<View>
*some more views, buttons blah blah here
</View>
)
}
}
export default withNavigation(AppBarComponent);
</code></pre></p>
<p style="font-size: 20px;">关于ios - 如何在另一个 React 组件中正确使用 TabNavigator，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/50926323/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/50926323/
</a>
</p>
页:
[1]