图像下面的中心文本反应原生

Question

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

以下是代码：

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;

这就是我目前所得到的：

有谁知道如何解决这个问题？

Answer 1

您要么指定<View style={[styles.column, {width:100, justifyContent:'center'}]}的with，要么将<TouchableHighlight>和<Button>包含在另一个<View>

中

Answer 2

您的列式道具中出现错误。

您已定义alignItems: 'flex-start'。当flexDirection: 'column'，alignItems prop影响视图的X轴时，EG视图中的项目是如何水平定位的。将它们的对齐设置为flex-start不是你想要的。

将您的样式更改为：

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