React Native: Как мне установить кнопку на уровне 70% от высоты ее родителя?

Question

Предположим, я хочу расположить кнопку на 30% ниже ее родительского элемента (т.е. всей страницы) в React Native.Как мне это сделать, используя Flexbox или другой метод?

Например, добавление justifyContent: 'center' к родительскому элементу будет работать, если я хочу, чтобы кнопка находилась на 50% пути вниз по странице.

Вот мой макет / таблица стилей React:

<View style={styles.container}>
  <LinearGradient colors={['#e80ca3', '#e500ff', '#950ce8']} style={styles.linearGradient}>
    <View style={styles.scanContainer}>
      <View style={styles.scanButton} />
    </View>
  </LinearGradient>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  linearGradient: {
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'center', // What to put here to make `scanContainer` 30% instead of 50% of the way down?
  },
  scanContainer: {
    alignSelf: 'center',
  },
  scanButton: {
    width: 175,
    height: 175,
    borderRadius: 87.5,
    backgroundColor: 'green',
  },
});

Answer 1

Использование flex:

<View style={[styles.scanContainer,{flex:1}]}>
   <View style={{flex:1}} />
   <View style={styles.scanButton} />
   <View style={{flex:2}} />
</View>

Использование размера:

import {Dimensions} from 'react-native';
<View style={[styles.scanButton,{marginTop:Dimensions.get('window').height * 0.3}]} />

Answer 2

Вы можете использовать absolute позиционирование для контейнера кнопки.

scanContainer: {
  alignSelf: 'center',
  position: 'absolute',
  bottom: '30%',
  left: 0
}

Answer 3

Вот решение, использующее flex свойства

linearGradient: {
        flex: 1,
        alignSelf: 'stretch', //... Remove justifyContent: 'center',
    },
    scanContainer: {
        flex: 0.7,
        justifyContent: 'flex-end', // 30 % from the bottom
        alignSelf: 'center',
    },

Answer 4

Вы можете добавить пустую View со сгибанием 0,7 над кнопкой:

  <View style={{ flex: 1 }}>
    <View style={{ flex: 0.7 }} />
    <Button title="button" />
  </View>