React native scrollview高度无法正常工作,但原因是什么?

React native scrollview高度无法正常工作,但原因是什么?,react-native,expo,scrollview,React Native,Expo,Scrollview,我有一个水平滚动视图。我把高度设为100。但是如果我的手指在我的应用程序的底部,那么我也可以滚动。因此,我只想在用户高度为100时滚动。现在我可以在屏幕上任意滚动 return ( <KeyboardAwareScrollView style={{margin: 0, padding: 0}}> <View style={{height: height - 150, backgroundColor: '#fff'}}> <Te

我有一个水平滚动视图。我把高度设为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>
返回(
故事
{
故事长度>0
?
故事地图((el,i)=>{
返回(
)
})
:
这是我的故事。
}
setAddStory(真实)}>
setChatMessage(e)}
onFocus={()=>setAlignItem('flex-end')}
OneDediting={()=>handleAlign()}
值={chatMessage}
多行={true}
style={[style.input,{height:Math.max(50,areaHeight)}]}
onContentSizeChange={e=>{
设置区域高度(例如nativeEvent.contentSize.height);
}}
占位符=“Gebe eine Nachricht ein…”/>

您可以通过将滚动视图包装到高度为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>
返回(
故事
{storys.length>0(
故事地图((el,i)=>{
返回(
);
})
) : (
这是我的故事。
)}
setAddStory(真实)}>
setChatMessage(e)}
onFocus={()=>setAlignItem(“flex-end”)}
OneDediting={()=>handleAlign()}
值={chatMessage}
多行={true}
style={[style.input,{height:Math.max(50,areaHeight)}]}
onContentSizeChange={e=>{
设置区域高度(例如nativeEvent.contentSize.height);
}}
占位符=“Gebe eine Nachricht ein…”
/>

您能分享一下您的世博会吗?