[英]react navigation tab navigator inside static layout
Can I achieve this layout?我可以实现这种布局吗?
sketch of layout:布局草图:
the header part is shared across all tabs.标题部分在所有选项卡之间共享。 it's part of the layout in this screen.
它是此屏幕中布局的一部分。 and each tab contains a scrollView.
每个选项卡都包含一个滚动视图。
btw, I have tried defining the tab navigator as a component and using that inside the render method, along with the static header component.顺便说一句,我已经尝试将选项卡导航器定义为一个组件,并在渲染方法中使用它,以及静态标题组件。
render() {
return (
<StaticHeaderComponent />
<MyTabNavigator />
)
}
that does not work.这是行不通的。 the tab navigator does not render at all.
标签导航器根本不呈现。
Here is a simple working example:这是一个简单的工作示例:
MyTabNavigator.js MyTabNavigator.js
import React, { Component } from 'react'
import { View, Text, ScrollView } from 'react-native'
import { TabNavigator } from 'react-navigation'
class FirstTab extends Component {
render() {
return (
<ScrollView>
<Text>first tab</Text>
</ScrollView>
)
}
}
class SecondTab extends Component {
render() {
return (
<ScrollView>
<Text>second tab</Text>
</ScrollView>
)
}
}
const MyNavigator = TabNavigator({
first: { screen: FirstTab },
second: { screen: SecondTab }
},
{
tabBarPosition: 'top'
})
export default MyNavigator
App.js应用程序.js
import React, { Component } from 'react'
import { View } from 'react-native'
import MyTabNavigator from './MyTabNavigator'
export default class App extends Component {
render() {
return (
<View style={{flex: 1}}>
<View // place your StaticHeaderComponent here
style={{height: 100, backgroundColor: 'green'}}
/>
<MyTabNavigator/>
</View>
)
}
}
For react-navigation 3.+ the Common mistakes section of the documentation comes in handy.对于 react-navigation 3.+,文档的常见错误部分会派上用场。 You can find the documentation and the example here .
您可以在此处找到文档和示例。
Specifically, you need to expose the static router
and pass navigation
as a prop.具体来说,您需要公开
static router
并将navigation
作为道具传递。 You can further customise the tab styles as required.您可以根据需要进一步自定义选项卡样式。
const TabbyNavigator = createMaterialTopTabNavigator({
Tab: TabScreen,
AnotherTab: AnotherTabScreen
});
class SomeScreen extends React.Component {
static router = TabbyNavigator.router;
render() {
return (
<TabbyNavigator navigation={this.props.navigation} />
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.