滚动视图高度不能正常工作，但为什么呢？

Question

我有水平滚动视图。我将高度设置为 100。但是如果我的手指在我的应用程序底部，那么我也可以滚动。所以我只想在用户高度为 100 时滚动。现在我可以在屏幕上滚动到我想要的任何位置。

  return (
    <KeyboardAwareScrollView style={{margin: 0, padding: 0}}>
      <View style={{height: height - 150, backgroundColor: '#fff'}}>
        <Text style={styles.title}>Storys</Text>
        <ScrollView
        horizontal={true}
        contentContainerStyle={{height: 100, marginLeft: 12, backgroundColor: 'red'}}
        scrollEventThrottle={50}
        showsHorizontalScrollIndicator={false}
        decelerationRate="normal"
        >
        {
          storys.length > 0 
          ?
            storys.map((el, i) => {
              return (
                <TouchableOpacity key={`index-${i}`} style={{padding: 0, marginRight: 16, borderWidth: 2, justifyContent: 'center', alignItems: 'center', borderRadius: 100, borderColor: 'red', height: 68, width: 68}}>
                  <Image resizeMode="contain" source={{ uri: `http://xxxx:3000/uploads/${el}`}} style={{height: 55, width: 55, borderRadius: 500}} />
                </TouchableOpacity>
              )
            })
          :
          <Text>Es sind zurzeit keine Storys vorhanden.</Text>
        }
        </ScrollView>
      </View>
      <View style={{flex: 1, paddingLeft: 16, paddingRight: 16, paddingBottom: 12, backgroundColor: '#fff', alignItems: alignItem, justifyContent:'space-between', flexDirection: 'row'}}>
        <TouchableOpacity onPress={() => setAddStory(true)}>
          <AntDesign name="pluscircleo" size={32} color="#444" />
        </TouchableOpacity>
        <TextInput
          onChangeText={e => setChatMessage(e)} 
          onFocus={() => setAlignItem('flex-end')}
          onEndEditing={() => handleAlign()}
          value={chatMessage}
          multiline={true}
          style={[styles.input, {height: Math.max(50, areaHeight)}]}
          onContentSizeChange={e => {
            setAreaHeight(e.nativeEvent.contentSize.height);
          }}
          placeholder="Gebe eine Nachricht ein..." />
        <TouchableOpacity style={{padding: 8, paddingRight: 10, borderRadius: 8, backgroundColor: 'red'}}>
          <Ionicons name="paper-plane-outline" size={28} color="#fff" />
        </TouchableOpacity>
      </View>
    </KeyboardAwareScrollView>

Answer 1

您可以通过将 ScrollView 包装到高度为 100 的视图中来完成此操作，下面的代码将帮助您：

return (
    <KeyboardAwareScrollView style={{ margin: 0, padding: 0 }}>
        <View style={{ height: height - 150, backgroundColor: "#fff" }}>
          <Text style={styles.title}>Storys</Text>
          <View style={{ height: 100 }}>
            <ScrollView
              horizontal={true}
              contentContainerStyle={{
                height: 100,
                marginLeft: 12,
                backgroundColor: "red"
              }}
              scrollEventThrottle={50}
              showsHorizontalScrollIndicator={false}
              decelerationRate="normal"
            >
              {storys.length > 0 ? (
                storys.map((el, i) => {
                  return (
                    <TouchableOpacity
                      key={`index-${i}`}
                      style={{
                        padding: 0,
                        marginRight: 16,
                        borderWidth: 2,
                        justifyContent: "center",
                        alignItems: "center",
                        borderRadius: 100,
                        borderColor: "red",
                        height: 68,
                        width: 68
                      }}
                    >
                      <Image
                        resizeMode="contain"
                        source={{ uri: `http://xxxx:3000/uploads/${el}` }}
                        style={{ height: 55, width: 55, borderRadius: 500 }}
                      />
                    </TouchableOpacity>
                  );
                })
              ) : (
                <Text>Es sind zurzeit keine Storys vorhanden.</Text>
              )}
            </ScrollView>
          </View>
        </View>
        <View
          style={{
            flex: 1,
            paddingLeft: 16,
            paddingRight: 16,
            paddingBottom: 12,
            backgroundColor: "#fff",
            alignItems: alignItem,
            justifyContent: "space-between",
            flexDirection: "row"
          }}
        >
          <TouchableOpacity onPress={() => setAddStory(true)}>
            <AntDesign name="pluscircleo" size={32} color="#444" />
          </TouchableOpacity>
          <TextInput
            onChangeText={e => setChatMessage(e)}
            onFocus={() => setAlignItem("flex-end")}
            onEndEditing={() => handleAlign()}
            value={chatMessage}
            multiline={true}
            style={[styles.input, { height: Math.max(50, areaHeight) }]}
            onContentSizeChange={e => {
              setAreaHeight(e.nativeEvent.contentSize.height);
            }}
            placeholder="Gebe eine Nachricht ein..."
          />
          <TouchableOpacity
            style={{
              padding: 8,
              paddingRight: 10,
              borderRadius: 8,
              backgroundColor: "red"
            }}
          >
            <Ionicons name="paper-plane-outline" size={28} color="#fff" />
          </TouchableOpacity>
        </View>
      </KeyboardAwareScrollView>

滚动视图高度不能正常工作，但为什么呢？

scrollview height does not work correctly but why?

scrollview

react-native

expo