Я пытаюсь использовать 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
part
// 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
нормально работать (прокручивать весь экран)
Спасибо!