React-native：space-仅当内容小于屏幕时才介于两者之间

Question

我有一个简单的屏幕，底部有一些文本和一个按钮。问题是在某些 phones/sizes 上，所有内容占据屏幕高度的 3/4 左右，在底部留下一个空隙。这就是我这样做的原因： flex: 1, and space-between 如下。但是当我按如下方式操作时，较小屏幕上的内容根本不允许我滚动它，所以我看不到/无法访问该按钮。

理想情况下，我想要做的是让元素正常流动，如果它们的总高度超过屏幕高度，让用户自由向下滚动到最后。但是，如果 phone 尺寸很大并且内容没有占据整个屏幕，则应将其排列为 'space-between'

<ScrollView contentContainerStyle={styles.contentStyle} style={styles.container}>
  <View>
    <Text>Some long text</Text>
  </View>
  <View>
    <Text>Some short text</Text>
    <Button onPress={}>
  </View>
</ScrollView>

样式表：

container: {
  paddingHorizontal: 8,
},
contentStyle: {
  flex: 1,
  justifyContent: 'space-between',
},

Answer 1

试试这个

<ScrollView
    nestedScrollEnabled
    contentContainerStyle={{flexGrow: 1}}>

    <View style={{flex : 1}}>
        <Text style={{textAlign: 'center'}}>
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
            Some long text Some long text
        </Text>
    </View>

    <View>
        <Text  style={{textAlign: 'center'}}>Some short text</Text>
        <Button title={"button"} onPress={{}}/>
    </View>

</ScrollView>

结果

React-native：space-仅当内容小于屏幕时才介于两者之间

React-native: space-between only if content smaller than screen

react-native

react-native-flexbox