React Native justifyContent: "center", height: "100% not working

Question

我试图将内容置于页面中心。有一个块的高度只到内容的底部。 （表现得像高度：“自动”）。我希望棕褐色块的高度为 100%。我尝试过使用 justifyContent: "center" ，但没有任何效果。顶部也是可滚动的，我不想滚动。 enter image description here

import {StyleSheet, TouchableOpacity, Text, View, Button} from 'react-native';

import {NativeRouter, Route, Link} from 'react-router-native';

import {TextInput} from 'react-native-paper';
import {mdiArrowRightCircleOutline} from '@mdi/js';

class Register extends Component {
  state = {
    email: '',
    password: '',
    confirmPassword: '',
  };

  render() {
    return (
      <View style={styles.root}>
        <View style={styles.wrapper}>
          <Text style={{marginBottom: 8, fontSize: 20}}>Welcome,</Text>
          <Text style={{marginBottom: 12, fontSize: 20}}>
            sign up to continue
          </Text>
          <TextInput
            label="Email"
            value={this.state.email}
            onChangeText={email => this.setState({email})}
            style={styles.form}
            underlineColor="#eb0091"
          />
          <TextInput
            label="Password"
            value={this.state.email}
            onChangeText={password => this.setState({password})}
            style={styles.form}
            underlineColor="#eb0091"
          />
          <TextInput
            label="Confirm Password"
            value={this.state.email}
            onChangeText={confirmPassword => this.setState({confirmPassword})}
            style={styles.form}
            underlineColor="#eb0091"
          />

          <Text
            style={{fontSize: 20, color: '#eb0091'}}
            onPress={() => this.props.history.push('/')}>
            Sign Up
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    //backgroundColor: '#ffffff', uncomment this once height issue is better
  },
  wrapper: {
    width: '80%',
  },
  form: {
    marginBottom: 20,
  },
  footer: {
    position: 'absolute',
    bottom: 0,
  },
});

export default Register;

Answer 1

我在代码中没有看到任何问题，所以问题必须在包含的组件中，你能分享其余的代码吗？