Javascript 在react native中，将图像下方的文本居中

我正在尝试将编辑文本置于图像下方的中心位置。这是我正在使用的应用程序的配置文件页面的开始，因此我希望编辑按钮文本位于图像下方的中心

代码如下：

import React from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, TextInput, TouchableHighlight, Alert, Button } from 'react-native';
import { Constants, ImagePicker } from 'expo';

const util = require('util');

export default class TopProfile extends React.Component{
    state = {
    image: 'https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg',
  };

  render() {
    let { image } = this.state;

    return (
        <View style={styles.container}>
            <View style={styles.column}>
              <TouchableHighlight onPress={this._pickImage}>
              {image &&
                <Image source={{ uri: image }} style={{ width: 100, height: 100, borderRadius: 50}} />}
                </TouchableHighlight>
                <Button
                    style={styles.button}
                title="Edit"
                onPress={this._pickImage}
              />
            </View>
          </View>
    );
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    flexDirection: 'row'
  },
  column:{
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-start',
    paddingLeft: 10,

  },
  button: {
  }

});

module.exports = TopProfile;

从“React”导入React；
从“react native”导入{AppRegistry、StyleSheet、Text、View、Image、TextInput、TouchableHighlight、Alert、Button}；
从“expo”导入{Constants，ImagePicker}；
const util=require（'util'）；
导出默认类TopProfile扩展React.Component{
状态={
图像：'https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg',
};
render（）{
设{image}=this.state；
返回(
{图像&&
}
);
}
_pickImage=async（）=>{
让结果=等待ImagePicker.launchImageLibraryAsync({
允许编辑：对，
相位：[4,3]，
});
控制台日志（结果）；
如果（！result.cancelled）{
this.setState（{image:result.uri}）；
}
};
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:“行”
},
专栏：{
弹性：1，
flexDirection:'列'，
alignItems:'flex start'，
paddingLeft:10，
},
按钮：{
}
});
module.exports=TopProfile；

这就是我目前得到的：

---

有人知道我该如何解决这个问题吗？

要么你指定了

的属性，要么你的列样式道具有错误

您已经定义了
alignItems:'flex start'
。当
flexDirection:“列”
时，alignItems道具会影响视图的X轴，例如视图中项目的水平定位方式。将其对齐设置为flex start并不是您想要的

将您的样式更改为：

column:{
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',       //THIS LINE HAS CHANGED
    paddingLeft: 10,
},