在反应原生中自动移动 Material 标签栏

Question

我有一个带有 5 个标签的材质顶部标签栏。但是所有 5 个选项卡都无法适应一个屏幕。在下面的屏幕截图中，只有 4 个选项卡可见。 我需要一种行为，当单击第三个选项卡时，选项卡栏会自动向左移动。我搜索了文档找不到类似的东西。

这里是 app.js

class App extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <AppContainer />
      </View>
    );
  }
}
const AppTabNavigator = createMaterialTopTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Home'
      }
    },
    Settings: {
      screen: SettingsScreen,
      navigationOptions: {
        tabBarlabel: 'Settings'
      }
    },
    Orders: {
      screen: OrdersScreen,
      navigationOptions: {
        tabBarlabel: 'Order List'
      }
    },
    Cancelled: {
      screen: CancelledItemsScreen,
      navigationOptions: {
        tabBarlabel: 'Cancelled Items'
      }
    },
    Others: {
      screen: OthersScreen,
      navigationOptions: {
        tabBarlabel: 'Others'
      }
    }
  },
  {
    initialRouteName: 'Home',
    tabBarOptions: {
      tabStyle: {
        width: 100,
        overflow: 'hidden'
      }
    }
  }
);

const AppContainer = createAppContainer(AppTabNavigator);
export default App;

Answer 1

你可以试试这个代码。

renderScene = ({ route }) => {
  if (Math.abs(this.state.index - this.state.routes.indexOf(route)) > 5) {
    return <View />;
  }

  return <MySceneComponent route={route} />;
};