我想在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>
);
}
}
我希望蓝色和红色圆圈同心。我如何实现这一目标?
答案 0 :(得分:31)
您已经集中在容器中。对于outerCircle也是如此。
outerCircle: {
backgroundColor: 'blue',
width: 100,
height: 100,
borderRadius: 100/2,
justifyContent: 'center',
alignItems: 'center'
},
答案 1 :(得分:2)
以以下两点为中心
justifyContent: 'center', alignItems: '居中',
答案 2 :(得分:0)
您应该使外部和内部圆圈居中,例如:
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,
justifyContent: 'center',
alignItems: 'center',
},
innerCircle: {
backgroundColor: 'red',
width: 80,
height: 80,
borderRadius: 80/2,
justifyContent: 'center',
alignItems: 'center',
}
});