我想在React Native中将一个视图放在另一个视图的中心.
这是我的代码:
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'yellow',
},
outerCircle: {
backgroundColor: 'blue',
width: 100,
height: 100,
borderRadius: 100/2,
},
innerCircle: {
backgroundColor: 'red',
width: 80,
height: 80,
borderRadius: 80/2,
}
});
export default class RecorderButton extends React.Component {
_buttonPressAction() {
Alert.alert("button pressed");
}
render() {
return (
<TouchableOpacity activeOpacity={0.4}
onPress={this._buttonPressAction}
style={styles.container}>
<View style={styles.outerCircle}>
<View style={styles.innerCircle} />
</View>
</TouchableOpacity>
);
}
}
这就是它的样子:
我想要蓝色和红色的同心圆.我如何做到这一点？