Expo React Native Web 中使用滚动视图的粘性菜单

Question

我试图阻止我的顶部菜单与我的 Expo React Native Web 项目中页面的其余部分一起滚动，但经过几个小时的故障排除后，我无法让菜单粘住。请看看我当前的 JSX 设置并帮助我解决这个问题：

<View style={{flex:1}}>
  <ScrollView stickyHeaderIndices={[0]} scrollEnabled={false} style={{flex:1, flexDirection: 'column'}}>
    <View style={{flexDirection: 'row', height:50, backgroundColor: 'lightgrey', alignItems: 'center', gap: 40, justifyContent: 'center'}}>
      <Text style={{marginLeft: 30}}>Logo</Text>
      <View style={{flex: 1}}></View>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <View style={{flex: .1}}></View>
    </View>

    <View style={{flex:1}}>
      <ScrollView nestedScrollEnabled={true} showsVerticalScrollIndicator={true} style={{backgroundColor:'red', flex: 1}}>
        <View style={{backgroundColor:'green', height: 2000}}></View>
        <View style={{backgroundColor:'yellow', height: 2000}}></View>
      </ScrollView>
    </View>
  </ScrollView>
</View>

Answer 1

您可以使用下面这些代码集将菜单栏放在顶部，

 <View style={{ flex: 1 }}>
      <View style={{ position: 'sticky', top: 0, backgroundColor: 'green', zIndex: 1 }}>
        <View style={{ flexDirection: 'row', height: 50, alignItems: 'center', justifyContent: 'center' }}>
          <Text style={{ marginLeft: 30 }}>Logo</Text>
          <View style={{ flex: 1 }}></View>
          <Text>Test</Text>
          <Text>Test</Text>
          <Text>Test</Text>
          <Text>Test</Text>
          <Text>Test</Text>
          <View style={{ flex: 0.1 }}></View>
        </View>
      </View>

      <ScrollView style={{ flex: 1 }}>
        <View style={{ backgroundColor: 'red', height: 2000 }}></View>
        <View style={{ backgroundColor: 'yellow', height: 2000 }}></View>
      </ScrollView>
    </View>