如何使用React Native从图像后面移动按钮

Question

我附上了这个问题的屏幕截图。我似乎无法从图像对象后面移动按钮。我尝试了zIndex和移动我的Views，但我仍然遇到同样的问题。该代码似乎只适用于IOS，但不适用于Android。

非常感谢您的协助。我的代码在下面。

谢谢。

项目截图

import * as React from 'react';
import { StyleSheet, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import { EvilIcons } from '@expo/vector-icons'
export default class ImagePickerExample extends React.Component {
state = {
image: null,
};
render() {
let { image } = this.state;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={styles.emptyProfile}>
{image && <Image source={{ uri: image }} style={styles.profile} />}
</View>
<View style={{ marginLeft: 70, justifyContent: 'center', bottom: 25 }}>
<View style={styles.camera}>
<EvilIcons name='camera' size={35} color='#fff' onPress={this._pickImage} />
</View>
</View>
</View>
);
}
componentDidMount() {
this.getPermissionAsync();
}
getPermissionAsync = async () => {
if (Constants.platform.ios) {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
};
_pickImage = async () => {
try {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 4],
quality: 1,
});
if (!result.cancelled) {
this.setState({ image: result.uri });
}
console.log(result);
} catch (E) {
console.log(E);
}
};
}
const styles = StyleSheet.create({
camera: {
backgroundColor: '#fd4336',
height: 50,
width: 50,
borderRadius: 25,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
},
profile: {
width: 190,
height: 190,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
},
emptyProfile: {
width: 200,
height: 200,
borderRadius: 100,
backgroundColor: '#c1b78d',
borderWidth: 5,
borderColor: '#fff',
shadowColor: 'black',
shadowOffset: { width: 0, height: 3 },
shadowRadius: 3,
shadowOpacity: 0.3,
elevation: 5
}
})

屏幕截图

Answer 1

好吧，我设法弄明白了！通过包装另一个View

<View style={styles.emptyProfile}>
{image && <Image source={{ uri: image }} style={styles.profile} />}
<View style={{ left: 140, position: 'absolute', bottom: 50 }} >
<View style={styles.camera}>
<EvilIcons name='camera' size={35} color='#fff' onPress={this._pickImage} />
</View>
</View>
</View>
);