React native 标题未在使用本机基的React Native中居中_React Native_Native Base

React native 标题未在使用本机基的React Native中居中

react-native

React native 标题未在使用本机基的React Native中居中,react-native,native-base,React Native,Native Base,我正在使用native base创建React本机应用程序：我使用Header组件来显示Body、Left和Right元素。根据文档，标题应该自动居中，但它不居中（如下所示）我是不是错过了一些简单的东西？任何帮助都将不胜感激 import { Container, Header, Content, Left, Right, Body, Title, Icon } from "native-base" export defau

我正在使用native base创建React本机应用程序：

我使用Header组件来显示Body、Left和Right元素。根据文档，标题应该自动居中，但它不居中（如下所示）

我是不是错过了一些简单的东西？任何帮助都将不胜感激

import { 
    Container,
    Header,
    Content,
    Left,
    Right,
    Body,
    Title,
    Icon
} from "native-base"

export default class Seminars extends React.Component{

    render(){
        return(
            <Container style={styles.container}>
                <Header style={styles.header}>
                    <Left>
                        <Icon name='arrow-back' />
                    </Left>
                    <Body>
                        <Title>Seminars</Title>
                    </Body>
                    <Right>
                        <Icon name='menu' />
                    </Right>
                </Header>
                <Content contentContainerStyle={styles.content} >
                    <Text>Content Here</Text>
                </Content>
            </Container>
        )
    }
}
const styles = StyleSheet.create({
    container: {

    },
    header: {
        paddingRight: 15,
        paddingLeft: 15
    },
    content: {
        display: "flex",
        flex: 1,
        justifyContent: "center",
        padding: 15
    }
});

import{
集装箱，
标题，
内容,，
左边
正确的，
身体，
标题
偶像
}来自“本地基地”
导出默认类。组件{
render（）{
返回(
研讨会
满足于此
)
}
}
const styles=StyleSheet.create({
容器：{
},
标题：{
paddingRight:15，
paddingLeft:15
},
内容：{
显示：“flex”，
弹性：1，
辩护内容：“中心”，
填充：15
}
});

如果希望标题位于中间，可以在左侧、正文和右侧添加

flex:1

，如下所示：

    return(
        <Container style={styles.container}>
            <Header style={styles.header}>
                <Left style={{flex:1}}>
                    <Icon name='arrow-back' />
                </Left>
                <Body style={{flex:1}}>
                    <Title>Seminars</Title>
                </Body>
                <Right style={{flex:1}}>
                    <Icon name='menu' />
                </Right>
            </Header>
            <Content contentContainerStyle={styles.content} >
                <Text>Content Here</Text>
            </Content>
        </Container>
    )

返回(
研讨会
满足于此
)

这就是结果：

我希望这个答案能帮助你：）


),
左校长：(
navigation.navigate（'drawerropen'）}/>
),
头灯：(
navigation.navigate（'drawerropen'）}/>
)
}
}
render（）{
返回(
)
}

}这个答案可以帮助你，为我工作

        <Header style={{backgroundColor:'#ff2929'}}>
        <Left style={{flex: 1}}>
            <Button transparent style={{width: 65}}>
                <Icon style={{color:"#fff"}} type="MaterialIcons" name={this.props.imageLeft}/>
            </Button>
        </Left>
        <Body style={{flex: 3,justifyContent: 'center'}}>
        <Title style={{color: '#fff',alignSelf:'center'}}>{this.props.headerTitle}</Title>
        </Body>
        <Right style={{flex: 1}}>
            <Button transparent style={{width: 65}}>                    
                <Icon style={{color:this.props.color}} type="MaterialIcons" name={this.props.imageRight}/>
            </Button>
        </Right>
        </Header>


{this.props.headerTitle}

您也可以试试这个：

      <Header>
          <Left style={{ flex: 1 }}>
            <Icon name="arrow-back" />
          </Left>
          <Body style={{ flex: 1 }}>
            <Title style={{ alignSelf: "center" }}>Seminars</Title>
          </Body>
          <Right style={{ flex: 1 }}>
            <Icon name="menu" />
          </Right>
        </Header>


研讨会

我找到了做这件事的最好方法，而且它对我来说很有用

<Header transparent>
    <Left style={{ flex: 1 }}>
        <Icon name='arrow-back' />
    </Left>
    <Body style={{ flex: 1 }}>
        <Title style={{ justifyContent: 'center', color: '#9fabdd' }}>Home</Title>
    </Body>
    <Right style={{ flex: 1 }}>
        <Icon name='arrow-back' />
    </Right>
</Header>

家


研讨会
满足于此

我发现当左右项大小不同时，这是一个解决方案，适用于android和iOS


<Header>
  <Left style={{flex: 1}} />
  <Body style={{flex: 1}}>
    <Title style={{alignSelf: 'center'}}>Header</Title>
  </Body>
  <Right style={{flex: 1}} />
</Header>

标题

请使用代码标签发布您的代码，而不是在图像中。谢谢，并尝试删除您在标题上的左右填充。HI-使用我的代码更新帖子。移除填充物没有任何帮助。你能试试这个：

也不起作用：（那个@Chris_S怎么样，它在你的项目中起作用了吗？嗨！是的-谢谢你的帮助。现在看起来好多了：）酷@Chris_S，我很高兴能帮助你。我把这个添加到body标签上，style={flex:1，alignItems:'center'}，这就成功了。这确实使它居中，在你的照片中你会注意到它有点偏离。欢迎来到这里。请正确地编排你的答案。请提供一些解释，而不仅仅是代码。谢谢除了标题样式之外，这似乎与三年前公认的答案相同。我错过什么了吗？设置标题的宽度是否为解决问题提供了关键区别？如果是这样的话，我建议编辑你的答案，让读者真正明白。如果我们想让它居中，这个样式需要做，宽度：100%是关键

<Header transparent>
    <Left style={{ flex: 1 }}>
        <Icon name='arrow-back' />
    </Left>
    <Body style={{ flex: 1 }}>
        <Title style={{ justifyContent: 'center', color: '#9fabdd' }}>Home</Title>
    </Body>
    <Right style={{ flex: 1 }}>
        <Icon name='arrow-back' />
    </Right>
</Header>

      <Container style={styles.container}>
            <Header style={styles.header}>
                <Left style={{flex:1}}>
                    <Icon name='arrow-back' />
                </Left>
                <Body style={{flex:1}>
                    <Title style={{width:'100%'}}>Seminars</Title>
                </Body>
                <Right style={{flex:1}}>
                    <Icon name='menu' />
                </Right>
            </Header>
            <Content contentContainerStyle={styles.content} >
                <Text>Content Here</Text>
            </Content>
        </Container>

<Header>
  <Left style={{flex: 1}} />
  <Body style={{flex: 1}}>
    <Title style={{alignSelf: 'center'}}>Header</Title>
  </Body>
  <Right style={{flex: 1}} />
</Header>