ScrollView 不会滚动到联系人列表的底部答案

【问题标题】：ScrollView will not scroll to the bottom of the contact ListScrollView 不会滚动到联系人列表的底部
【发布时间】：2022-11-15 19:14:41
【问题描述】：

我正在创建一个联系人列表。为此，我已将联系人数据放入滚动视图中。当用户输入一个字母给搜索联系人并试图转到列表中的最后一个联系人时，它不会显示（它会显示一点，它会反弹回来。）

        return (
            <SafeAreaView>
              <ScrollView style={{flexGrow: 1}} bounces={false} >
                <View style={{ flex: 1, flexDirection: 'row', borderTopWidth: 0.5, borderTopColor: 'grey'}}>
                  <View style={{ flex: 1 }}>
                    <Text onPress={() => setChecked(true)} style={{ fontSize: 20, marginHorizontal: 10 }}>
                      {item.name + ' '}
                    </Text>
                    <Text style={{ fontSize: 17, marginHorizontal: 10, marginTop: 5, color: 'grey' }}>
                      {item.phoneNumbers && item.phoneNumbers[0] && phone && item.phoneNumbers[0].digits}
                    </Text>
                  </View>
                  <TouchableOpacity
                    onPress={() => {
                      onChangeValue(item);
                    }}
                  >
                    <CheckBox
                      style={{ width: 15, height: 15, paddingTop: 8 }}
                      right={true}
                      checked={!!selectedContacts[phoneNumber]}
                      onPress={() => {
                        onChangeValue({ item });
                      }}
                    />
                  </TouchableOpacity>
                </View>
              </ScrollView>
            </SafeAreaView>
        );

我做了一些研究，他们说在 scrollView 上使用 flexGrow 1 或使用 flex 1 创建父视图，但这都不是解决方案。

当用户滚动到底部时，如何向用户显示底部联系人？

【问题讨论】：

标签： react-native

【解决方案1】：

请像这样在scrollView 中使用flex:1。

<View style={{flexDirection: 'column', flex: 1, width: wp(100)}}>
          <WaterfallList
            data={FinalArray}
            bounces={false}
            onMomentumScrollBegin={onScrollStart}
            onMomentumScrollEnd={onScrollEnd}
            heightForItem={item => Dimensions.get('screen').width * 0.6}
            numColumns={2}
            allLoaded={true}
            onLoading={() => console.log('dsd')}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            contentStyle={{flexGrow: 1}}
            style={{
              flex: 1,
              paddingHorizontal: Dimensions.get('screen').width * 0.03,

              backgroundColor: 'transparent',
            }}
            renderItem={ContactItemServer}
          />
    </View>

【讨论】：