在本機反應中自動移動材料選項卡欄

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} />;
};