中心和底部布局答案

【问题标题】：Center and Bottom layout中心和底部布局
【发布时间】：2019-03-30 16:48:20
【问题描述】：

我正在开发我的第一个 react-native 应用程序，并且正在尝试围绕布局进行思考。到目前为止，这是我的代码：

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

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>My App</Text>
      <View style={styles.buttonContainer}>
        <TouchableOpacity>
          <Text>My Button</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 45
  },
  buttonContainer: {
    backgroundColor: 'gray',
    paddingHorizontal: 20,
    paddingVertical: 5
  }
})

export default App

这呈现为：

但是，我希望将文本垂直居中，但将按钮推到底部，略高于它。像这样的：

我能够通过添加获得该输出：

position: 'absolute',
bottom: 50

我的buttonContainer 样式，但我觉得这不是正确的方法。有没有合适的flex-y 方法来做到这一点？

【问题讨论】：

你需要为它增加权重。首先找出你想要显示文本和按钮的比率。例如：你可以认为你可以将屏幕分成 6 个相等的部分，然后 5 部分得到文本，下 1 部分显示按钮。你需要为其添加 flex:5 属性到文本样式和 flex:1 属性到按钮样式
stackoverflow.com/q/36191516/3597276
如果您希望My App 在中心完美对齐，请考虑三个弯曲的Views：顶部和底部高度为 20%，中间一个高度为 60%。将您的按钮放在底部View，alignItems 属性设置为flex-end。

标签： react-native layout flexbox

【解决方案1】：

试试这个：

function App() {
    return (
      <View style={styles.container}>
        <View style={styles.topPadder} />
        <View style={styles.textView}>
          <Text style={styles.text}>My App</Text>
        </View>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.buttonStyle}>
            <Text>My Button</Text>
          </TouchableOpacity>
        </View>
      </View>
      )
}

const styles = StyleSheet.create({
  topPadder: {
    flex: 20,
  },
  textView: {
    flex: 60,
    justifyContent: 'center',
  },
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 45
  },
  buttonContainer: {
    justifyContent: 'flex-end',
    flex: 20,
    marginBottom: 10,
  },
  buttonStyle: {
    paddingHorizontal: 20,
    paddingVertical: 5,
    backgroundColor: 'gray',
  },
})

export default App

您可以根据需要在buttonContainer中设置marginBottom。

【讨论】：

【解决方案2】：

用 View 包裹文本 My App 并为其添加 flex 样式。

<View style={{flex:1}}>
  <Text style={styles.text}>My App</Text>
</View>

或

考虑到您的确切期望，这将解决您的问题。

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

function App() {
return (
<View style={styles.container}>
  <View style={{flex:12}}>
     <Text style={styles.text}>My App</Text>
  </View>
  <View style={styles.buttonContainer}>
    <TouchableOpacity>
      <Text>My Button</Text>
    </TouchableOpacity>
  </View>
</View>
)
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 45
  },
    buttonContainer: {
    backgroundColor: 'gray',
    paddingHorizontal: 20,
    flex: 1,
    alignItems: 'center',
    paddingVertical: 5
  }
})

export default App

相应地调整 My App 中包裹 <View> 和 buttonContainer 的 flex。

【讨论】：

这行不通。 OP 所需的功能是按钮靠近底部对齐。
@UzairA。尽管我在我的设备中检查了答案，但我错误地输入了答案。感谢平。现在是正确的。

【解决方案3】：

你需要为它增加重量。首先找出你想要显示文本和按钮的比率。例如：你可以认为你可以将屏幕分成 6 个相等的部分，然后 5 部分得到文本，下 1 部分显示按钮。你需要为文本样式添加 flex:5 属性，并为其添加 flex:1 属性到按钮样式。

您可以通过浏览这些链接找到有关 flex 和其他最佳实践的更多详细信息 https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet-a4147802405c

https://www.tutorialspoint.com/react_native/react_native_flexbox.htm

【讨论】：