React Native Scroll View 不滚动也不跳到底部

Question

我对 React Native 还是很陌生，我对 . 滚动不适用于 ScrollView。

我尝试将 "flex:1" 赋予 the 并尝试将其包裹起来，但它不起作用...

我尝试了多种提供“flex:1”来查看和滚动视图的解决方案，但似乎没有任何效果......

有人可以帮我解决这个问题吗？ 另外，如果你能告诉我当新的东西被添加到滚动视图时如何弹跳/跳到滚动视图的底部，那就太好了。

谢谢。

下面是我的代码：

<Container>
<Content style={{backgroundColor: 'white'}}>                  
    <ScrollView contentContainerStyle={{ flex: 1 }}>
      <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', marginTop: 20, height: 555, }}>
        <View 
          style={{
            width: 80, 
            height: 80, 
            backgroundColor:'#959595',
            borderRadius: 50,
          }}
        />
        <Text style={{fontWeight: 'bold', marginTop: 15}}>Personal Assistant</Text>

        <View style={{flexDirection: 'row', marginTop: 25, marginLeft: 15}}>
          <View 
            style={{
              width: 50, 
              height: 50, 
              backgroundColor:'#E3E3E3',
              borderRadius: 50,
            }}
          />

          <View style={{flex: 1, flexDirection: 'column', marginLeft: 15, marginRight: 15}}>
            <View style={{backgroundColor: "#E3E3E3", borderRadius: 10, padding: 10}}>
              <Text>
                Hello{"\n"}
                I'm your personal assistant to help you list your item. {"\n"}
                Let's get started!
                This will only take a minute.
              </Text>

              <Text style={{color: "#575757", marginTop: 10, fontSize: 12}}>35 mins ago</Text>
            </View>

            <View style={{backgroundColor: "#E3E3E3", borderRadius: 10, padding: 10, marginTop: 10}}>
              <Text>
                First of all, are you trying to {"\n"}SELL or open for BOTH?
              </Text>

              <Text style={{color: "#575757", marginTop: 10, fontSize: 12}}>35 mins ago</Text>
            </View>
          </View>
        </View>
        
        {
          this.state.assistanceResponse >= 2 && this.registerDataObj["firstSelection"] !== null || undefined ?
          
          <View style={{display: "flex", backgroundColor: "#3578e5", borderRadius: 10, padding: 10, alignSelf: 'flex-end', marginRight: 15, marginTop: 10}}>
            <Text style={{color: 'white'}}>
              {this.registerDataObj["firstSelection"].toUpperCase()}
            </Text>

            <Text style={{color: "white", marginTop: 10, fontSize: 12}}>35 mins ago</Text>
          </View>
          
          :
          <React.Fragment></React.Fragment>
        }

        {
          this.state.userResponse >= 2 ?
            <View style={{flexDirection: 'row', marginTop: 10, marginLeft: -10 }}>
              <View 
                style={{
                  width: 50, 
                  height: 50, 
                  backgroundColor:'#E3E3E3',
                  borderRadius: 50,
                }}
              />
              <View style={{backgroundColor: "#E3E3E3", borderRadius: 10, padding: 10, marginLeft: 15}}>
                <Text>
                  Great! Which category of product {"\n"}
                  are you trying to {`${this.registerDataObj['firstSelection'].toUpperCase()}`}?
                </Text>

                <Text style={{color: "#575757", marginTop: 10, fontSize: 12}}>35 mins ago</Text>
              </View>
            </View>
          :
            <React.Fragment></React.Fragment>
        }
        
        {
          this.state.assistanceResponse >= 3 && this.registerDataObj["categorySelection"] !== null || undefined ?

          <View style={{display: "flex", backgroundColor: "#3578e5", borderRadius: 10, padding: 10, alignSelf: 'flex-end', marginRight: 15, marginTop: 10}}>
            <Text style={{color: 'white'}}>
              {this.registerDataObj["categorySelection"].toUpperCase()}
            </Text>

            <Text style={{color: "white", marginTop: 10, fontSize: 12}}>35 mins ago</Text>
          </View>

          :
          <React.Fragment></React.Fragment>
        }
      </View>
    </ScrollView>
  </Content>
</Container>

Answer 1

您是否有机会使用 Native Base？ 如果你是，他们的 Content 组件实际上是一个 ScrollView。所以在你的情况下，你有 2x ScrollViews。我会删除<ScrollView contentContainerStyle={{ flex: 1 }}>，只保留<Container><Content><View style....