Центр и нижний макет

Question

Я работаю над своим первым приложением на языке реакции и пытаюсь обернуть голову вокруг макетов.Вот мой код:

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 -й способ сделать это?

Answer 1

Оберните текст Мое приложение с помощью View и добавьте к нему стиль flex.

<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

Настройте flex в My App, обернутый <View> и buttonContainer соответственно.

Answer 2

Попробуйте:

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 в соответствии с вашими потребностями.

Answer 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