标题标题不使用本机库在React Native中居中
Chr*_*s_S 7 react-native native-base
我正在使用native-base来创建React Native应用程序:
我正在使用Header Component来显示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
}
});
Sya*_*ara 10
如果您希望标题位于中心,您可以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>
)
这就是结果:
我希望这个答案可以帮到你:)
- 我将其添加到body标签style = {{flex：1，alignItems：'center'}}中，达到了目的。这确实使它居中，在您的图片中您会注意到它略有偏离。 (3认同)
这个答案可以帮助您，为我工作。
<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>
| 归档时间： |
|
| 查看次数： |
7169 次 |
| 最近记录： |