react-native - 滚动不适用于 ScrollView 和绝对定位组件

Question

我有一个滚动视图和一个具有绝对位置的组件。scrollView 根本不滚动。看看代码：https ://snack.expo.io/@codebyte99/overlap-test

<ScrollView contentContainerStyle={{ flex: 1 }}>
    <View style={styles.container}>
        <Image
            source={{
              uri: 'https://facebook.github.io/react/logo-og.png',
              cache: 'only-if-cached',
            }}
            style={{width: 400, height: 100}}
          />

        <View style={styles.overlap}>
            <Text>Event1</Text>
            <Text>Event2</Text>
            <Text>Event3</Text>
            <Text>Event4</Text>
            <Text>Event5</Text>
            <Text>Event6</Text>
            <Text>Event7</Text>

            <View style={{ backgroundColor: 'orange', height: 800, width: 500 }}/>
            <View style={{ backgroundColor: 'green', height: 800, width: 500 }}/>
        </View>
    </View>
</ScrollView>


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  overlap: {
    width: 300, 
    backgroundColor: 'red', 
    borderColor: 'red', 
    borderWidth: 1,
    position: 'absolute',
    top: 80,
    zIndex: 9999,
    overflow: 'visible'
  },
});

如果在scrollView中没有使用flex，绝对定位的组件是不完全可见的，如果使用了，则滚动不起作用。

标签： react-native

Answer 1

您是否尝试更改flex: 1为flexGrow: 1in contentContainerStyle。