如何在 React Native 的另一个视图中将视图居中？答案

【问题标题】：How to center a view inside another view in React Native?如何在 React Native 的另一个视图中将视图居中？
【发布时间】：2017-05-07 00:03:18
【问题描述】：

我想在 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>
    );
  }
}

这就是它的外观：

我想要蓝色和红色的圆圈同心。我如何做到这一点？

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

您已经在容器中居中。对于 outerCircle 也是如此。

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

【讨论】：

【解决方案2】：

您应该将外圈和内圈都居中，如下所示：

    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',

  }
});

【讨论】：

【解决方案3】：

通过以下两个使事情居中

justifyContent: '居中', alignItems: '居中',

【讨论】：