底部工作表模式在 Android 中不起作用

Question

我正在使用底部表单模态作为使用 React Native 的移动应用程序的引用列表，我的模态在 ios 中正常工作，我可以向下滚动到底部而不会出现问题，但在 android 中列表根本不会移动，我尝试 falt 列表和映射。

这是我的代码：

<BottomSheetModal
                    ref={bottomSheetmodalRefCity}
                    index={0}
                    snapPoints={snapPoints}
                    backgroundStyle={{borderRadius:30}}
                    style={{backgroundColor:"white",
                    borderRadius:30,
                      shadowColor: "#000",
                    shadowOffset: {
                      width: 0,
                      height: 12,
                    },
                    shadowOpacity: 0.58,
                    shadowRadius: 8.00,
                    
                    elevation: 6,}}
                  >
 <View className="mt-5 items-end pb-48">
  <Text className="font-[Bold] text-lg mr-6 pt-1">choose a city</Text>
  <ScrollView
  contentContainerStyle={{ flexGrow: 1 }}
  showsVerticalScrollIndicator={false}
  
  >
  
  {cityData.map((item) => (
    <View
      key={item.key}
      className="mx-8 my-3 bg-white w-28 h-8 rounded-md items-end justify-center"
      style={{
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 3,
        ...Platform.select({
          ios: {
            shadowOpacity: 0.3,
            shadowRadius: 4,
          },
          android: {
            elevation: 4,
          },
        }),
      }}
    >
      <TouchableOpacity
        onPress={() =>
          handleItemPress(
            item.value,
            SetSelectedCityR,
            SetSelectedCity,
            bottomSheetmodalRefCity
          )
        }
      >
        <Text className="fons-[Bold] text-lg pr-2">{item.value}</Text>
      </TouchableOpacity>
    </View>
  ))}
  </ScrollView>
</View>


            </BottomSheetModal>

Answer 1

看起来 Android 上 BottomSheetModal 中的滚动问题可能与布局的结构有关。不要直接在模式中使用 ScrollView，而是尝试将内容包装在 View 中并使用 FlatList。 FlatList 针对性能进行了优化，并允许更好的滚动行为。

<BottomSheetModal
  ref={bottomSheetmodalRefCity}
  index={0}
  snapPoints={snapPoints}
  backgroundStyle={{ borderRadius: 30 }}
  style={{
    backgroundColor: "white",
    borderRadius: 30,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 12 },
    shadowOpacity: 0.58,
    shadowRadius: 8.00,
    elevation: 6,
  }}
>
  <View style={{ flex: 1, padding: 16 }}>
    <Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 10 }}>Choose a city</Text>
    <FlatList
      data={cityData}
      keyExtractor={item => item.key}
      renderItem={({ item }) => (
        <View
          style={{
            margin: 8,
            backgroundColor: 'white',
            width: 120,
            height: 40,
            borderRadius: 8,
            alignItems: 'center',
            justifyContent: 'center',
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.1,
            shadowRadius: 4,
            elevation: 3,
          }}
        >
          <TouchableOpacity
            onPress={() => handleItemPress(item.value, SetSelectedCityR, SetSelectedCity, bottomSheetmodalRefCity)}
          >
            <Text style={{ fontWeight: 'bold', fontSize: 16 }}>{item.value}</Text>
          </TouchableOpacity>
        </View>
      )}
      showsVerticalScrollIndicator={false}
    />
  </View>
</BottomSheetModal>