当前位置: 动力学知识库 > 问答 > 编程问答 >

flexbox - How to center a view inside another view in React Native?

问题描述:

I want to center one view inside another one in React Native.

This is my code:

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>

);

}

}

And this is how it looks:

I want to have blue and red circles concentric. How do I achieve that?

网友答案:

You are already centering in the container. Follow the same for outerCircle as well.

  outerCircle: {
    backgroundColor: 'blue',
    width: 100,
    height: 100,
    borderRadius: 100/2,
    justifyContent: 'center',
    alignItems: 'center'
  },
分享给朋友:
您可能感兴趣的文章:
随机阅读: