我是React-Native，React navigation和nativebase的新手。粗略地说，我试图找到一种方法在我的应用程序的每个屏幕上设置相同的页眉和页脚。标题包含标题+登录图标。页脚包含导航。为应用程序提供全局标题和全局页脚的正确方法是什么？
我已经尝试定义一个包装器组件（MainStructure）并在内容中添加{this.props.children}但是每当我点击页脚时我都会在this.props.navigation上出错。对于此错误，我尝试手动向MainStructure添加导航道具它不起作用。我试过添加HOC withNavigation，也没有结果。
我已经尝试定义一个标题组件和一个页脚组件，并在组件中的任何地方添加它们，但这很丑陋+它不能用于某些我无法获得的原因。
最后，我尝试在navigationOptions和defaultNavigationOptions中定义标题，但它既不起作用。
这是应用程序代码
const AppNavigator=createSwitchNavigator(
{
Home:Home,
Search: Search,
Account:Account,
Login:Login
},
{
initialRouteName:"Home",
}
);
const AppContainer= createAppContainer(AppNavigator);
class App extends Component{
render() {
return (
<MainStructure>
<AppContainer/>
</MainStructure>
);
}
}
export default App;
AppRegistry.registerComponent('Kioozi', ()=> App);
这是MainStructure代码
class MainStructure extends React.Component {
constructor(props){
super(props);
Text.defaultProps.uppercase=false
}
render() {
return (
<StyleProvider style={getTheme(variables)}>
<Container>
<Header>
<Left/>
<Body>
<Title>{I18n.t('homepage.title')}</Title>
</Body>
<Right>
<Button transparent onPress={()=> this.props.navigation.navigate('Login')}>
<Icon name={'login'} type={"Entypo"}/>
</Button>
</Right>
</Header>
<Content padder>
{this.props.children}
</Content>
<Footer>
<FooterTab>
<Button badge vertical onPress={()=> this.props.navigation.navigate('Home')}>
<Badge><Text>2</Text></Badge>
<Icon name={"home"} type={"Entypo"}/>
<Text>{I18n.t('footer.home')}</Text>
</Button>
<Button badge vertical onPress={()=> this.props.navigation.navigate('Search')}>
<Badge><Text>2</Text></Badge>
<Icon name={"magnify"} type={"MaterialCommunityIcons"}/>
<Text>{I18n.t('footer.search')}</Text>
</Button>
<Button badge vertical onPress={()=> this.props.navigation.navigate('Account')}>
<Badge><Text>2</Text></Badge>
<Icon name={"account-outline"} type={"MaterialCommunityIcons"}/>
<Text>{I18n.t('footer.myAccount')}</Text>
</Button>
</FooterTab>
</Footer>
</Container>
</StyleProvider>
);
}
}
export default MainStructure;
我使用createSwitchNavigator，因为我想从nativebase使用bottomTab而不是使用react-navigation。预期结果：每当我按下一个标签时，我都会得到带有页眉和页脚的相关屏幕。
从nativebase导入<AppContainer />和Header，如下所示包装Footer
<MainStructure>
<View style={{flex:1}}>
<Header>.....</Header>
<AppContainer />
<Footer>.....</Footer>
</View>
</MainStructure>;