Question

假设我想在React Native中将按钮的30％放在其父元素（即整个页面）的下方。如何使用Flexbox或其他方法执行此操作？

例如，如果我希望按钮位于页面下方的50％，那么将justifyContent: 'center'添加到父元素就可以了。

这是我的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属性

的解决方案

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

Answer 2

您可以在按钮上方添加一个带有flex 0.7的空View：

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

Answer 3

您可以对按钮容器使用absolute定位。

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

Answer 4

使用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}]} />

React Native：如何将按钮设置为其父级高度的70％？

4 个答案: