Question

我正在开发我的第一个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方法可以做到这一点吗？

Answer 1

您需要为此增加重量。首先找出要显示的文字和按钮的比例。例如：您可以认为您可以将屏幕划分为6个相等的部分，然后将5个部分划分为文本，并降低1part显示按钮。您需要为其文本样式添加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

Answer 2

用视图将文本我的应用换行，并为其添加弹性样式。

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

OR

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

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

相应地调整包装在<View>和buttonContainer中的“我的应用”中的弯曲度。

Answer 3

尝试一下：

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

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

中心和底部布局

3 个答案: