在React Native中将文本居中在图片下方

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;

以下是我目前遇到的问题：

有人知道如何解决吗？

- festiveox

Answer 1

您的列样式属性存在错误。

您定义了alignItems: 'flex-start'。当 flexDirection: 'column' 时，alignItems 属性影响视图的 X 轴，即视图中项目的水平定位方式。将它们的对齐方式设置为 flex-start 不是您想要的。

请更改您的样式为：

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

- Ryan Turnbull

Answer 2

要么你指定<View style={[styles.column, {width:100, justifyContent:'center'}]}的宽度，要么将你的<TouchableHighlight>和<Button>包裹在另一个<View>中。

- Ahmad Santarissy