我是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,

    },
});

我希望动画组件位于中间，但它仍然位于屏幕的左上角