Question

RN - 0.44 我有一个组件，它的行为类似于faceBook，现在我还有一个更高的组件来处理标签。所以简单来说，组件的排序是 -

MainComponent > Tabs Component > Scroll Component

现在主要的组件渲染如下 -

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

标签组件渲染如下 -

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>
  );

最后滚动组件如下 -

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>
    )

现在通过此设置，滚动在IOS中完美运行。即使滚动容器工作完美。但是当涉及到android时，它最初会呈现好的。但是滚动仅限于顶部组件而不是滚动组件。我已经尝试了scrollView和FlatList但没有使用android。任何人都可以解释我的结构错误吗？

Answer 1

在您编写的代码中，我似乎无法在任何地方找到<ScrollView>来触发滚动。

import {ScrollView} from 'react-native'并在<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>
       );

这应该可以正常工作。

反应原生FlatList / ScrollView不滚动（仅限Android）

1 个答案: