RN - 0.44 我有一个类似于 Facebook 的提要组件，现在我还有一个处理选项卡的更高组件。所以从简单的意义上讲，组件的顺序为 -
MainComponent > Tabs Component > Scroll Component
现在主要组件渲染如下 -
return(
<Container style={{flex: 1}}>
<Content style={{flex: 1}}>
<Tabs Component/>
</Content>
</Container>
)
Tabs 组件渲染如下 -
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。 任何人都可以阐明我的结构错误吗？
最佳答案
在你编写的代码中我似乎没有找到 <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>
);
这应该可以正常工作。
关于reactjs - React Native FlatList/ScrollView 不滚动(仅限 Android)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44377001/