画像の下にあるセンターテキストが反応しました

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'}]}ので指定するか、あなたの列スタイルの小道具に誤りがあります別の<View>

Answer 2

の内側にあなたの<TouchableHighlight>と<Button>を包むのいずれかです。

あなたはalignItems: 'flex-start'を定義しました。 flexDirection: 'column'の場合、alignItems propはビューのX軸に作用し、EGはビュー内のアイテムがどのように水平に配置されるかを示します。フレックススタートにアラインメントを設定することは、ここで必要なものではありません。

に自分のスタイルを変更し

：

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