Reagiere native FlatList/ScrollView nicht Scrollen (nur Android)

RN - 0.44 Ich habe eine Komponente, die einen Feed ähnlich facebook handelt, jetzt habe ich auch eine höhere Komponente, die die Tabs behandelt. so in einfachen Sinn werden die Komponenten bestellt als -Reagiere native FlatList/ScrollView nicht Scrollen (nur Android)

MainComponent > Tabs Component > Scroll Component

Nun ist die wichtigste Komponente machen ist wie folgt -

return(
     <Container style={{flex: 1}}> 
      <Content style={{flex: 1}}> 
       <Tabs Component/> 
      </Content> 
     </Container> 
    )

Die Tabs Komponente RENDER wird wie folgt -

return (
     <Container> 
     <Header style={{backgroundColor:'white'}}> 
      <Left> 
      <Button transparent onPress={this.goKotha}> 
       <Icon name="ios-chatbubbles-outline" size={30} style={{color:'#78909c'}}/> 
      </Button> 
      </Left> 
      <Body> 

      </Body> 
      <Right> 
      <Button transparent onPress={this.goSearch}> 
       <Icon name="ios-search-outline" size={30} style={{color:'#78909c'}}/> 
      </Button> 
      </Right> 
     </Header> 
     <Content style={{flex: 1}}> 
      {this.renderTabs()} 
     </Content> 
     <BottomNavigation 
      activeTab={this.state.setTab} 
      labelColor="white" 
      rippleColor="white" 
      style={{ height: 66, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }} 
      onTabChange={(newTabIndex, oldTabIndex) => { 
      this.setState({ 
       setTab: newTabIndex 
      }) 
      console.log(this.state.setTab); 
      }} 
     > 
      <Tab 
      barBackgroundColor="#eceff1" 
      label="Feed" 
      activeLabelColor="#43a047" 
      icon={<Icon size={20} name="ios-book" />} 
      activeIcon={<Icon size={20} name="ios-book-outline" style={{color:'#43a047'}} />} 
      /> 
      <Tab 
      barBackgroundColor="#cfd8dc" 
      label="Friends" 
      activeLabelColor="#388e3c" 
      icon={<Icon size={20} name="ios-people" />} 
      activeIcon={<Icon size={20} name="ios-people-outline" style={{color:'#388e3c'}} />} 
      /> 
      <Tab 
      barBackgroundColor="#b0bec5" 
      label="Alerts" 
      activeLabelColor="#b9f6ca" 
      icon={<Icon size={20} name="ios-notifications" />} 
      activeIcon={<Icon size={20} name="ios-notifications-outline" style={{color:'#b9f6ca'}} />} 
      /> 
      <Tab 
      barBackgroundColor="#90a4ae" 
      label="Settings" 
      activeLabelColor="#69f0ae" 
      icon={<Icon size={20} name="ios-cog" />} 
      activeIcon={<Icon size={20} name="ios-cog-outline" style={{color:'#69f0ae'}}/>} 
      /> 
     </BottomNavigation> 
     </Container> 
);

Schließlich wird die Bildlaufkomponente ist wie folgt -

return(
     <Container style={{flex: 1}}> 
      <Content style={{flex: 1}}> 
       <ActivityIndicator animating={this.state.refresh} text="Refreshing..."/> 
       <Item style={{justifyContent:'space-between', marginBottom:4,marginTop:4, alignItems:'center', backgroundColor:'white'}}> 
        <Image source={{uri: this.props.user.profilePic || 'user.png'}} style={{height:30, width:30, marginLeft:10, marginTop:10, marginBottom: 10}} defaultSource={require('../../assets/user.png')}/> 
        <Text style={styles.SubHeading} onPress={this.createPost}>What's new today</Text> 
        <Icon name="ios-refresh-outline" size={20} style={{color: '#2e7d32'}} onPress={this.onRefresh}/> 
        <Icon name="ios-camera-outline" size={20} style={{color: '#2e7d32', marginRight: 10}} onPress={this.uploadProfpic}/> 
       </Item> 
       <FlatList data={this.props.data.allPosts} renderItem={this._renderItem} keyExtractor={this._keyExtractor}/> 
      </Content> 
     </Container> 
    )

Jetzt mit dieser Einrichtung funktioniert der Bildlauf perfekt in IOS. Selbst mit dem Scroll-Container funktioniert das einwandfrei. Aber wenn es um Android geht, macht es zunächst in Ordnung. Dann ist der Bildlauf jedoch auf die oberste Komponente und nicht auf die Bildlaufkomponente beschränkt. Ich habe sowohl scrollView und FlatList versucht, aber nicht mit Android arbeiten. Kann irgendjemand Licht an die Stelle bringen, wo ich die Struktur falsch bekomme?

Quelle

2017-06-05 Risha Sringa Changmai

Die Flatlist benötigt ebenfalls eine gebundene Höhe - sie muss verstehen, wie viel Raum sie freigibt, damit die Rolle wie erwartet funktioniert. –

In dem Code, den Sie geschrieben haben, scheint ich <ScrollView> nirgends zu finden, um den Bildlauf auszulösen.

import {ScrollView} from 'react-native' und die Teile Sie die Spirale, die innerhalb <ScrollView></ScrollView>

return (
<ScrollView> 
    <Container style={{flex: 1}}> 
     <Content style={{flex: 1}}> 
      <ActivityIndicator animating={this.state.refresh} text="Refreshing..."/> 
      <Item style={{justifyContent:'space-between', 
        marginBottom:4,marginTop:4, alignItems:'center', backgroundColor:'white'}}> 
       <Image source={{uri: this.props.user.profilePic || 'user.png'}} style={{height:30, width:30, marginLeft:10, marginTop:10, marginBottom: 10}} defaultSource={require('../../assets/user.png')}/> 
       <Text style={styles.SubHeading} onPress= 
       {this.createPost}>What's new today</Text> 
       <Icon name="ios-refresh-outline" size={20} style={{color: 
       '#2e7d32'}} onPress={this.onRefresh}/> 
       <Icon name="ios-camera-outline" size={20} style={{color: 
      '#2e7d32', marginRight: 10}} onPress={this.uploadProfpic}/> 
      </Item> 
      <FlatList data={this.props.data.allPosts} renderItem= 
    {this._renderItem} keyExtractor={this._keyExtractor}/> 
     </Content> 
    </Container> 
    </ScrollView> 
     );

Dies sollte gut funktionieren hinzufügen möchten.

Quelle

2017-06-09 10:48:09

Reagiere native FlatList/ScrollView nicht Scrollen (nur Android)

Antwort

Verwandte Themen