水平和垂直居中按钮

Question

我是 React Native 的新手，我正在尝试将我创建的组件垂直和水平居中。如果我将中心样式代码放在整体视图中，它就可以工作，但这也会使 app.js 中心的所有内容。应该有一种方法只使我制作的组件居中。

我已尝试更改 flex 和 diff flexbox 选项。

import React, { Component } from 'react';
import {
    Platform,
    Animated,
    StyleSheet,
    Text,
    View,
    Button,
    Alert,
    TouchableHighlight,
} from 'react-native';
import Animater from './components/Animater';
import PresentationalComponent from './components/PresentationalComponent';

const AnimatedButton = Animated.createAnimatedComponent(TouchableHighlight);

export default class HelloWorldApp extends Component {

    constructor(props) {
        super(props);
        this.state = {
            listDataFromChild: null
        };
    }

    myCallback = (dataFromChild) => {
        this.setState({ listDataFromChild: dataFromChild });
    }

    render() {

      return (
        <View >     
          <Text style={styles.score}>
            Score: {this.state.listDataFromChild}
          </Text>
          <View style={styles.container}>
            <Animater  callbackFromParent={this.myCallback}/>     
          </View>
        </View>
        //<PresentationalComponent color = {[animatedStyle]} showAlert = {this.showAlert}/>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        paddingHorizontal: 10,

    },
    score: {
        fontSize: 30,
        alignItems: 'center',
        top: 100,

    },
});

我希望 Animator 组件位于中心，但它却保留在屏幕的左上角

Answer 1

要将居中的项目与位置对齐：'absolute'，您必须添加以下样式

 {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center"
  }

另外请用 flex:1 制作主容器

{ flex: 1 }

完整代码

import React from "react";
import { View, Text, StyleSheet } from "react-native";

export default class Home1 extends React.Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <Text style={styles.score}>Score: 50</Text>
        <View style={styles.container}>
          <Text>Animator container</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: { flex: 1 },
  container: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center"
  },
  score: {
    fontSize: 30,
    alignItems: "center",
    top: 100
  }
});

Answer 2

你的风格应该是，

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
}

注意：使用flex 时，我们不需要position 属性。