标题标题未在 React Native 中使用 native-base 居中答案

【问题标题】：Header Title not centered in React Native using native-base标题标题未在 React Native 中使用 native-base 居中
【发布时间】：2017-08-11 09:58:47
【问题描述】：

我正在使用 native-base 创建一个 React Native 应用程序：

我正在使用 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
    }
});

【问题讨论】：

请用代码标签而不是在图片中发布您的代码，谢谢
并尝试删除 paddingRight 和 left 你放在 header 上
嗨 - 用我的代码更新了帖子。删除填充没有帮助。
你能试试这个吗：<Title style={{ alignSelf: 'center'}}>
那也没用 :(

标签： react-native native-base

【解决方案1】：

如果你想让标题居中，你可以像这样在 Left、Body 和 Right 中添加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>
    )

这就是结果：

希望这个回答可以帮到你:)

【讨论】：

那个@Chris_S 怎么样，它在你的项目上工作吗？
嗨！是的 - 感谢您的帮助。现在看起来好多了:)
酷@Chris_S，我很高兴能帮助你。
我将它添加到 body 标记中，style={{flex:1,alignItems:'center'}}，这样就成功了。这确实使它居中，在您的图片中您会注意到它略微偏离。

【解决方案2】：

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

        <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>

【讨论】：

【解决方案3】：

你也可以试试这个：

      <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>

【讨论】：

【解决方案4】：

我找到了最好的方法来做这件事并为我工作。

<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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

static navigationOptions = ({ navigation }) => {
    return {

        headerTitle: (

  <Image  style={{width: 50, height: 10}} alignItems='center' source={require('../assets/zazzy.png')} />
  </View>
 ),
        headerLeft: (
            <View style={{ padding: 10 }}>
                <Ionicons name="ios-apps" color='gold' size={24} onPress={() => navigation.navigate('DrawerOpen')} />
            </View>
        ),
         headerRight: (
            <View style={{ padding: 10 }}>
                <Ionicons name="md-search" color='silver'  size={24} onPress={() => navigation.navigate('DrawerOpen')} />
            </View>
        )

    }
}
render() {
    return (
        <HomeScreenTabNavigator screenProps={{ navigation: this.props.navigation }} />

    )
}

}

【讨论】：

欢迎来到 SO。请正确格式化您的答案。请提供一些解释，而不仅仅是代码。谢谢！

【解决方案7】：

      <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>

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

【讨论】：

在标题样式之外，这似乎与三年前接受的答案相同。我错过了什么吗？在标题上设置宽度是否在解决问题方面提供了关键区别？如果是这样，我建议您编辑您的答案，以使读者非常清楚。
如果我们想让它居中就需要做这个样式，宽度：100% 是关键