我正在尝试将图像下方的编辑文本居中。这是我正在开发的应用程序的个人资料页面的开头,因此我希望编辑按钮文本位于图像下方并居中显示。
以下是代码:
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;
以下是我目前遇到的问题:
有人知道如何解决吗?