react Native 中的 Flex 框不起作用，按钮不会显示

Question

我对 flex styles 有疑问。

设想

• 如果我在代码中flex: 1行，按钮将不会显示
• 如果我删除flex: 1他们会出现。

请帮我。 它在新的 React Native 0.61 中，我确实删除了 flex，但我需要它。

我该如何解决？ 或者是在 0.61 中共享一个错误...

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

import Header from './Components/Header';
import StartGameScreen from './screens/StartGameScreen'

export default function App() {
  return (
    <View styles={styles.screen}>
      <Header title="Geuss a Number"/>
      <StartGameScreen/>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  }
});

应用程序.js

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

const StartGameScreen = props => {
  return(
      <View style={styles.screen1}>
        <Text style={styles.title}>Start a New Game!</Text>
        <View style={styles.inputContainer}>
            <Text>Select a Number</Text>
            <TextInput />
            <View style={styles.buttonContainer}>
              <Button title="Reset" />
              <Button title="Confirm" onPress={() => {}} />
            </View>
        </View>
      </View>
  );
};

const styles = StyleSheet.create({
  screen1: {
    flex: 1,
    padding: 10,
    alignItems: 'center'
  },
  title: {
    fontSize: 20,
    marginVertical: 10
  },
  inputContainer: {
    width: 300,
    maxWidth: '80%',
    alignItems: 'center'
  },
  buttonContainer: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    paddingHorizontal: 15
  }
});

export default StartGameScreen;

StartGameScreen.js

照片 1：我的 StartGameScreen.js 中的 flex: 1 代码

照片 2：通过删除我的 StartGameScreen.js 中的 flex: 1 代码，按钮显示

但我需要我的弹性我做错了什么？ 对不起，我的第一篇文章一开始就很糟糕！

Answer 1

尝试将 flex: 1 添加到 inputContainer 和 buttonContainer flex: 1 中

Answer 2

照片 1：我的 StartGameScreen.js 中的 flex: 1 代码

照片 2：通过删除我的 StartGameScreen.js 中的 flex: 1 代码，按钮显示

但我需要我的弹性我做错了什么？ 对不起，我的第一篇文章一开始就很糟糕！