如何在React Native的另一个视图中居中视图?

时间:2016-12-21 14:17:32

标签: react-native flexbox

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

这就是它的样子: non-centered-cirlces

我希望蓝色和红色圆圈同心。我如何实现这一目标?

3 个答案:

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

  }
});