如何在同一容器中将标题对齐居中，将文本左对齐

Question

嗨，我正在学习反应原生。我正在尝试创建一个注册表。我需要在中间顶部的标题和左侧的所有标签字段。以下是我的代码。

 <ScrollView contentContainerStyle={{ flexGrow: 1 }}
    scrollEnabled >
  <View style={styles.fieldsContainer}>
  <View>
  <Text style={styles.headline}>Personal Info</Text>
  </View>
 <Text></Text>

和 CSS

    const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    alignItems: 'stretch',
  },
fieldsContainer: {
    flex: 1,
    margin:10,
    paddingTop:30,
    paddingLeft:20,
    backgroundColor: '#D3D3D3',
    alignItems: 'stretch',
    alignItems: 'center',
  },
  textLabelsStyle: {
fontSize:34,
fontWeight:'bold',
color:'black',
  },
  headline: {
    textAlign: 'center', 
    fontWeight: 'bold',
    fontSize: 18,
    marginTop: 0,
    width: 200,
    backgroundColor: 'yellow',
  },

我

面临的问题是我无法同时获得中心标题和字段标签

Answer 1

将对齐

自我添加到中心。

<ScrollView contentContainerStyle={{ flexGrow: 1 }}
    scrollEnabled >
  <View style={styles.fieldsContainer}>
  <View style={{alignSelf:'center'}}>
  <Text style={styles.headline}>Personal Info</Text>
  </View>
 <Text></Text>