时间戳

首页 > 解决方案 > 是否可以使用 react-navigation 和 nativebase 在 react-native 上定义全局（页眉 + 页脚）包装器

react-native - 是否可以使用 react-navigation 和 nativebase 在 react-native 上定义全局（页眉 + 页脚）包装器

问题描述

我对 React-Native、React 导航和 nativebase 非常陌生。粗略地说，我试图找到一种方法在我的应用程序的每个屏幕上设置相同的页眉和页脚。标题包含标题 + 登录图标。页脚包含导航。为应用程序设置全局页眉和全局页脚的正确方法是什么？

我已经尝试定义一个包装组件（MainStructure）并在内容中添加 {this.props.children}，但是每当我单击页脚时，我都会在 this.props.navigation 上收到错误。对于这个错误，我尝试手动将导航道具添加到 MainStructure 它不起作用。我试过用导航添加 HOC，也没有结果。

我已经尝试定义一个页眉组件和一个页脚组件，并将它们添加到组件中的任何地方，但这很丑+由于某种我不明白的原因它不起作用。

最后，我尝试在 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 而不是来自 react-navigation 的 bottomTab。预期结果：每当我按下选项卡时，我都会看到带有页眉和页脚的相关屏幕。

标签： react-nativereact-navigationnative-base

解决方案

<AppContainer />用导入Header和Footer从 nativebase包装下面的类似内容

<MainStructure>
  <View style={{flex:1}}>
    <Header>.....</Header>
    <AppContainer />

  <Footer>.....</Footer>
 </View>
</MainStructure>;

推荐阅读