Question

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

我尝试定义包装器组件（MainStructure）并在内容中添加{this.props.children}，但是每当单击页脚时，this.props.navigation都会出错。对于此错误，我尝试将导航道具手动添加到MainStructure无效。我试过用Navigation添加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。预期结果：每当我按下选项卡时，我都会看到带有页眉和页脚的相关屏幕。

Answer 1

通过从nativebase导入public partial class contactus : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { // To Do. Implementation will be discussed in Part 142 } } protected void Button1_Click(object sender, EventArgs e) { try { if (Page.IsValid) { MailMessage mailMessage = new MailMessage(); mailMessage.From = new MailAddress(" mygmail@gmail.com"); mailMessage.To.Add("mygmail@gmail.com"); mailMessage.Subject = txtSubject.Text; mailMessage.Body = "Sender Name : " + txtName.Text + " " + "Sender Email : " + txtEmail.Text + " " + "Comments : " + txtComments.Text; mailMessage.IsBodyHtml = true; SmtpClient smtpClient = new SmtpClient("smtp.gmail.com", 587); smtpClient.EnableSsl = true; smtpClient.Credentials = new System.Net.NetworkCredential("mygmail@gmail.com", "password"); smtpClient.Send(mailMessage); lblMessage.ForeColor = System.Drawing.Color.Blue; lblMessage.Text = "Thank you for contacting us"; txtName.Enabled = false; txtEmail.Enabled = false; txtComments.Enabled = false; txtSubject.Enabled = false; Button2.Enabled = false; } } catch (Exception ex) { // Log the exception information to // database table or event viewer lblMessage.ForeColor = System.Drawing.Color.Red; lblMessage.Text = "There is an unkwon problem. Please retry; } }和<AppContainer />来包裹Header如下

Footer

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

1 个答案: