在 React Native 视图之间减少 space

Question

我目前正在开发具有以下布局的 React Native 应用程序：

（完整的源代码可以在 https://snack.expo.io/@ajaybhatta49/new-project 找到，但我认为问题出在这个文件中）

import React, {useState} from 'react'
import { View, StyleSheet } from 'react-native'
import CButton from './components/CButton'
import Display from './components/Display'

const buttonRows = [
  ["1", "2", "3", "+"],
  ["4", "5", "6", "-"],
  ["7", "8", "9", "x"],
  [".", "0", "<", "/"],
  ["CLEAR", "ENTER"]
]

export default function App(props) {
  const [input, setInput] = useState('')
  const handlePress = str => {
    if (str === "CLEAR") {
      setInput('')
    } else if (str === "ENTER") {
      try {
        setInput(eval(input))
      } catch(err) {
        setInput("SYNTAX ERROR")
      }
    } else if (str === "x") {
      setInput(`${input}*`)
    } else if (str === "<") {
      setInput(input.slice(0, input.length - 1))
    } else {
      setInput(input + str)
    }
  }
  return (
    <View style={styles.main}>
      <Display value={input}/>
      {buttonRows.map(buttons => {
        return (
          <View style={styles.inline}>
            {buttons.map(b => {
              return (
                <CButton title={b} handlePress={() => handlePress(b)}/>
              )
            })}
          </View>
        )
      })}
    </View>
  )
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    flexDirection: 'column',
    alignContent: 'center',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#222',
    padding: 5
  },
  inline: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    height: 5
  }
})

该应用程序运行良好，但我想去掉按钮行之间多余的 space，最好将所有内容垂直居中对齐。我尝试将 styles.main.justifyContent 的值更改为 space-evenly、space-around、flex-start 和 center，其中 none 解决了问题。我还尝试了一个类似问题的答案，即摆脱 flex: 1 之一，但除非它们都存在，否则应用程序会崩溃。我该怎么办？

Answer 1

justifyContent 是垂直还是水平取决于 flex direction.So in styles.inline 当你使用 flex 而你的方向是 column 时，它会使 column 占据所有垂直 space 它可以。我删除了高度，因为它似乎破坏了布局（我知道为什么）

const styles = StyleSheet.create({
  main: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#222',
    padding: 5
  },
  inline: {
    flexDirection: 'row',
  }
})

在 React Native 视图之间减少 space

Reduce space between React Native views

css

react-native

flexbox

react-native-flexbox