我正在尝试在ViewPagerAndroid
中使用ScrollView
,但是没有呈现出这样的图像。
在我将contentContainerStyle={{ flex: 1 }}
添加到ScrollView
之后,ViewPagerAndroid
将正确呈现,但是整个页面将无法像这样滚动
(整个页面不能滚动,仅FlatList
部分可以滚动)
这是一个页面容器
<ScrollView contentContainerStyle={{ flex: 1 }}>
<View style={styles.container}>
<CustomHeader/>
{Platform.OS === 'android'
? (
<CategoryViewPager>
<View
key="0"
style={styles.viewContent}
>
<DishesListContainer />
</View>
<View
key="1"
style={styles.viewContent}
>
<Text>Second page 2</Text>
</View>
</CategoryViewPager>
)
: (
<Text>IOS Support later</Text>
)
}
</View>
</ScrollView>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red',
},
viewContent: {
paddingLeft: dimens.level_12,
paddingRight: dimens.level_12,
},
})
这是ViewPager
// CategoryViewPager/index.js
<View style={styles.container}>
<CustomTabsButton/>
<ViewPagerAndroid
style={styles.viewPager}
>
{this.props.children}
</ViewPagerAndroid>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
},
viewPager: {
flex: 1,
backgroundColor: setColors.mainBg,
},
})
这是FlatList
部分
// DishesListContainer/index.js
const DishesListContainer = props => (
<View>
{props.isShowTitleBar && (
<CategoryTitleBar />
)}
{props.dishes && (
<FlatList
style={styles.listContainer}
data={props.dishes}
keyExtractor={item => `${item.pk}-${item.sk}`}
numColumns={Dimensions.get('window').width > 600 ? 3 : 2}
renderItem={({ item }) => (
<DishesList
photoUrl={item.photoUrls[0]}
name={item.name}
priceRange={item.priceRange}
/>
)}
/>
)}
</View>
)
所以如何使ViewPager
正确显示,并使ScrollView
正常工作(滚动整个屏幕)
谢谢!