react-native - ViewPagerAndroid 未在 ScrollView 中显示（使用 Reacnative）

Question

我正在尝试使用ViewPagerAndroidinside 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工作（滚动整个屏幕）

谢谢！

标签： react-nativeandroid-viewpagerscrollviewreact-native-flatlist