React Native Scroll View не прокручивается и не переходит вниз

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 случайно?Если вы, их компонент контента на самом деле ScrollView.Так что в вашем случае у вас есть 2x ScrollViews.Я бы удалил <ScrollView contentContainerStyle={{ flex: 1 }}>, и просто получил бы <Container><Content><View style....