2

引き出しのアイテムから押されたときに、特定のタブに移動する必要があります。私はたくさん検索しましたが、私の問題に関連するものは何も見つかりませんでした

このナビゲーション アクションのリンクをたどろうとしましたが、それを実装する方法を見つけることができません でした。 Drawer Navigator から特定のタブに移動します。

const TabNavigator = createMaterialTopTabNavigator(
  {
    Upcoming: { screen: UpcomingScreen },
    Accepted: { screen: AcceptedScreen },
    Ongoing: { screen: OngoingScreen },
    Completed: { screen: CompletedScreen },
  },
);

const Screen1_StackNavigator = createStackNavigator({
  First: {
    screen: TabNavigator,
  },
});


const DrawerNavigatorExample = createDrawerNavigator({
  Screen1: {
      //Title
      screen: Screen1_StackNavigator,
      navigationOptions: {
        drawerLabel: 'Upcoming Trips',
        labelStyle: {
          fontFamily: Fonts.LatoLight,
          fontWeight: '200',
        },
        drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 20, width: 21}} source={require('./images/calendar.png')} />
      )
    },
  },
  Screen2: {
    //Title
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: () => null,
    },
  },
  Screen3: {
    //Title
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Accepted Trips',
      labelStyle: {
        fontFamily: Fonts.LatoLight,
        fontWeight: '200',
      },
      drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 22, width: 22}} source={require('./images/sticker.png')} />
      )
    },
  },
  Screen4: {
    //Title
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Ongoing Trips',
      labelStyle: {
        fontFamily: Fonts.LatoLight,
        fontWeight: 'normal'
      },
      drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 22, width: 22}} source={require('./images/navigator.png')} />
      )
    },
  },
  Screen5: {  
    //Title
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Completed Trips',
      labelStyle: {
        fontFamily: Fonts.LatoLight,
        fontWeight: 'normal'
      },
      drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 24, width: 20}} source={require('./images/checklist.png')} />
      )
    },
  },
})

引き出しメニューの「 Screen3 」を押すと、タブナビゲーターの「 Accepted 」画面に移動する必要があります。ドロワー メニューで「 Screen4 」を押すと、タブ ナビゲーターの「進行中」画面に移動する必要があります。ドロワーメニューで「 Screen5 」を押すと、タブナビゲーターの「完了」画面に移動する必要があります。それを達成する方法はありますか？ありがとう

4

2 に答える 2

0

こんにちは皆さん、私は少し作業して簡単な解決策を見つけました。将来的に役立つことを願っています。解決策は、「カスタム ドロワー コンポーネントを作成し、contentComponent で言及する」ことです。

const TabNavigator = createMaterialTopTabNavigator(
  {
    Upcoming: { screen: UpcomingScreen },
    Accepted: { screen: AcceptedScreen },
    Ongoing: { screen: OngoingScreen },
    Completed: { screen: CompletedScreen },
  },
);

UpcomingNav = (props) => {
  props.navigation.navigate('Upcoming')
}

AcceptedNav = (props) => {
  props.navigation.navigate('Accepted')
}

OngoingNav = (props) => {)
  props.navigation.navigate('Ongoing')
}

CompletedNav = (props) => {
  props.navigation.navigate('Completed')
}

const CustomDrawerContentComponent = props => (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView>
        <DrawerItems {...props} />

        <TouchableOpacity onPress={() => this.UpcomingNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 20, width: 21}} source={require('./images/calendar.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Upcoming Trip</Text>
            </View>
          </TouchableOpacity>

        <TouchableOpacity style={{paddingTop: calcHeight(2)}} onPress={() => this.AcceptedNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 22, width: 22}} source={require('./images/sticker.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Accepted Trip</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity style={{paddingTop: calcHeight(2)}} onPress={() => this.OngoingNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 22, width: 22}} source={require('./images/navigator.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Ongoing Trip</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity style={{paddingTop: calcHeight(2)}} onPress={() => this.CompletedNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 24, width: 20}} source={require('./images/checklist.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Completed Trip</Text>
            </View>
          </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
);

const DrawerNavigatorExample = createDrawerNavigator({
  Screen1: {
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: () => null,
    },
  },
  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: () => null,
    },
  },
},{
    contentComponent: CustomDrawerContentComponent,
    contentOptions: {
      labelStyle: {
        fontFamily: Fonts.LatoRegular,
        fontWeight: 'normal'
      }
    },
  },
);
于 2019-10-27T05:51:52.043 に答える