React Nativeのビューを別のビューの中央に配置するにはどうすればいいですか？

Question

React Nativeの別のビューの中央に1つのビューを配置したいとします。

これは私のコードです：

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> 
    ); 
    } 
} 

そしてこれは、それがどのように見えるかです：

私は同心円状の青と赤の円を持っていると思います。どのように達成するのですか？

Answer 1

あなたはすでにコンテナをセンタリングしています。 outerCircleの場合も同様です。

outerCircle: { 
    backgroundColor: 'blue', 
    width: 100, 
    height: 100, 
    borderRadius: 100/2, 
    justifyContent: 'center', 
    alignItems: 'center' 
    },