标签导航器在ScrollView中不起作用

时间:2019-03-26 10:03:09

标签: react-native-android react-navigation

我在屏幕中间放置了一个标签导航器。它在标签导航器上方没有其他组件。我需要scrollView作为父组件,因为我需要垂直滚动选项卡导航器以及屏幕中的其他组件。但是,如果选项卡导航器的父组件是ScrollView,则它将停止工作。

https://snack.expo.io/@codebyte99/tab-navigator-in-scrollview-test

代码:

export default class App extends React.Component {
  render() {
    return (
      <ScrollView> //if ScrollView is removed, it works.
        <View style={{ flex: 1, marginTop: 50 }}>
          <Card>
            <AssetExample />
          </Card>     
          <DetailTab />
        </View>
      </ScrollView>
    );
  }
}

标签导航:

const DetailTab = createMaterialTopTabNavigator({
  Info: Home,
  Menu: Home,
  Review: Home,
},
{   
    defaultNavigationOptions: ({ navigation }) => ({
    }),
    tabBarOptions: {
      activeTintColor: 'blue',
      inactiveTintColor: '#80868B',
      activeBackgroundColor: 'transparent',
      inactiveBackgroundColor: 'transparent',
      labelStyle: {
        fontSize: 12,
      },
      tabStyle: {
          paddingBottom: 10,
          paddingTop: 10,
          backgroundColor: 'transparent',
      },
      style: {
        backgroundColor: 'white',
      },
      indicatorStyle: {
        backgroundColor: 'blue'
      }
    },
  }
);

export default createAppContainer(DetailTab);

0 个答案:

没有答案