Zentrieren Sie Text unter Bild in reagieren nativen

Question

Ich versuche, den Text bearbeiten unterhalb des Bildes zu zentrieren. Dies ist der Anfang der Profilseite für eine App, an der ich arbeite, sodass der Text der Bearbeitungsschaltfläche unter dem Bild zentriert werden soll.

Hier ist der Code:

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; 

Und das ist, was ich zur Zeit bin immer:

Hat jemand eine Idee hat, wie kann ich dieses Problem beheben?

Answer 1

es ist entweder Sie die angeben, mit der <View style={[styles.column, {width:100, justifyContent:'center'}]} oder Sie wickeln Ihre <TouchableHighlight> und <Button> in einem anderen <View>

Answer 2

Es gibt einen Fehler in der Spalte Stil Requisiten.

Sie haben alignItems: 'flex-start' definiert. Wenn die flexDirection: 'column', die AlignItems-Prop betrifft die X-Achse der Ansicht, EG wie Elemente in der Ansicht horizontal positioniert sind. Die Ausrichtung auf Flex-Start ist hier nicht erwünscht.

Ihre Stile ändern:

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