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

Question

我对 flex 样式有疑问。

场景

如果我在代码中加入 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,
  }
});

App.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

Photo 1: flex: 1 code in my StartGameScreen.js

Photo 2: by deleting flex: 1 code in my StartGameScreen.js the buttons shows

但是我需要 flex 我做错了什么？对不起我可怜的 post 一开始是我的第一个 post !

Answer 1

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

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

Flex box in react Native is not working buttons wont show up

javascript

flexbox

reactjs

react-native

react-props

场景