javascript - react native : How do I set a button to be at the level of 70% of the height of its parent?

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',
    },