ViewPagerAndroid不显示在ScrollView内部(使用Reacnative)

时间:2019-05-19 19:14:50

标签: react-native android-viewpager scrollview react-native-flatlist

我正在尝试在ViewPagerAndroid中使用ScrollView,但是没有呈现出这样的图像。

enter image description here

在我将contentContainerStyle={{ flex: 1 }}添加到ScrollView之后,ViewPagerAndroid将正确呈现,但是整个页面将无法像这样滚动 enter image description here

(整个页面不能滚动,仅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正常工作(滚动整个屏幕)

谢谢!

0 个答案:

没有答案