减少 React Native 视图之间的空间答案

【问题标题】：Reduce space between React Native views减少 React Native 视图之间的空间
【发布时间】：2021-08-19 04:41:50
【问题描述】：

我目前正在开发一个具有以下布局的 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
  }
})

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

【问题讨论】：

标签： css react-native flexbox react-native-flexbox

【解决方案1】：

justifyContent 是垂直工作还是水平工作取决于 flex 方向。所以在styles.inline 中，当您使用 flex 而您的方向是列时，它会使列占用它可以占用的所有垂直空间。我删除了高度，因为它似乎破坏了布局（idk 为什么）

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

【讨论】：