Question

我对React Native来说还很陌生，而我有一个问题。滚动不适用于ScrollView。

我尝试给赋予“ flex：1”，并尝试将其包装起来，但是没有用...

我尝试了多种解决方案，提供“ flex：1”来查看和滚动查看，但似乎无济于事...

有人可以帮我解决这个问题吗？另外，如果您能告诉我在将新内容添加到scrollView时如何弹跳/跳到scrollView的底部，那真的很棒。

谢谢。

下面是我的代码：

<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。因此，根据您的情况，您有2个ScrollViews。我将删除<ScrollView contentContainerStyle={{ flex: 1 }}>，而只拥有<Container><Content><View style....

React Native Scroll View不会滚动并且不会跳到底部

1 个答案: