React Native ScrollView 空白间距

Question

我设置了以下代码，以便图像 1 中的蓝色区域在有足够空间时不可滚动，而在空间不足时变为可滚动。我的问题是 ScrollView 组件在底部添加了额外的间距，该间距为红色。我需要的是绿色区域始终位于 ScrollView 内容（蓝色）的正下方。

如何阻止 ScrollView 在不需要时“增长”额外空间并使其看起来像图 2 所示？ ScrollView 的内容是否应该增长，直到绿色页脚接触视图底部，但不会将其推出视图。然后 ScrollView 应该可以滚动。

import { View, ScrollView, SafeAreaView, StyleSheet } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={ {  flex: 1, } }>
        <ScrollView style={ { backgroundColor: "red" } } >
          <View style={ [{ height: 300, backgroundColor: "blue" }] } />
        </ScrollView>
        <View style={ [ { backgroundColor: "green"  }] }>
          <View style={ { height: 50, width: 200  } }/>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

博览会示例：https://snack.expo.dev/@c-gibson-emesent/honest-red-scones

Answer 1

你需要用另一个包裹 flex: 1 会占用剩余空间。

检查以下链接 https://snack.expo.dev/J76HlNJvg-jFI1Ae3OgnI