Saya berjuang untuk meneruskan const navigation = useNavigation(); dengan benar ke fungsi luar saya.

Saat ini, saya memiliki fungsi 'utama' ini:

export default function MyDrawer({ route }) {
  const nav = useNavigation(); // Use hook here as u will now dont get any error. now pass it as param to above if needed

  return (
    <NavigationContainer independent={true}>
      <Drawer.Navigator
        initialRouteName="QR"
        drawerContent={props => CustomDrawerContent(props, route)}
      >
        <Drawer.Screen
          name="QR"
          component={QR}
          initialParams={{ user: route.params.user }}
        />
        <Drawer.Screen name="Odabir" component={Odabir} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Yang menangani logika laci dan perutean. Saya dulu mendeklarasikan const Drawer = createDrawerNavigator() dalam fungsi ini:

function CustomDrawerContent({ props, navigation }, route, ) {
  // *** Don't use below hook here its wrong to use hooks outside main function if need pass to it as param from main function
  // const navigation = useNavigation();
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View
        style={{
          height: 150,
          alignItems: "center",
          justifyContent: "center",
          marginTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight
        }}
      >
        <Image
          source={{uri:route.params.user.photoUrl}}
          style={{ height: 110, width: 110, borderRadius: 60 }}
        />
      </View>
      <View style={{ height: 30, alignItems: "center" }}>
        <Text style={styles.naslov}>
          {route.params.user.name} {route.params.user.lastname}
        </Text>
      </View>
      <View style={{ height: 30, alignItems: "center" }}>
        <Text style={styles.naslov}>
          {route.params.user.email} 
        </Text>
      </View>
      <View style={{ height: 30, alignItems: "center", marginBottom: 10 }}>
        <Text style={styles.naslov}></Text>
      </View>
      <Divider />
      <ScrollView style={{ marginLeft: 5 }}>
        <TouchableOpacity
          style={{ marginTop: 20, marginLeft: 20 }}
          onPress={() => props.navigation.navigate("QR")}
        >
          <View style={{ padding: 10 }}>
            <Ionicons name="ios-qr-scanner" size={20} styles={{}}>
              <Text style={styles.naslov}> QR</Text>
            </Ionicons>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ marginTop: 20, marginLeft: 20 }}
          onPress={() => props.navigation.navigate("Odabir")}
        >
          <View style={{ padding: 10 }}>
            <Ionicons name="ios-qr-scanner" size={20} styles={{}}>
              <Text style={styles.naslov}> Odabir</Text>
            </Ionicons>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ marginTop: 20, marginLeft: 20 }}
          onPress={() => props.navigation.navigate("Odabir")}
        >
          <View style={{ padding: 10 }}>
            <Ionicons name="ios-qr-scanner" size={20} styles={{}}>
              <Text style={styles.naslov}> Odabir</Text>
            </Ionicons>
          </View>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
}

Yang menangani perutean onPress ke komponen yang berbeda. Saya harus memindahkan const nav = useNavigation(); karena cara kerja kait dan proses menangkap data dari Google API. Pertanyaan saya adalah bagaimana cara mengembalikan param dengan benar ke fungsi MyDrawer sehingga navigasi berfungsi kembali? Kesalahan yang saya dapatkan saat ini adalah TypeError: undefined is not an object(evaluating 'props.navigation')

0
user11027087 3 Maret 2020, 12:19

1 menjawab

Jawaban Terbaik

Kode pembaruan:

export default function MyDrawer({ route }) {
  const nav = useNavigation(); // Use hook here as u will now dont get any error. now pass it as param to above if needed

  return (
    <NavigationContainer independent={true}>
      <Drawer.Navigator
        initialRouteName="QR"
        drawerContent={props => <CustomDrawerContent {...props} {...{route}} />}
      >
        <Drawer.Screen
          name="QR"
          component={QR}
          initialParams={{ user: route.params.user }}
        />
        <Drawer.Screen name="Odabir" component={Odabir} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Isi Laci

const CustomDrawerContent = ({navigation, route}) => {
  // *** Don't use below hook here its wrong to use hooks outside main function if need pass to it as param from main function
  // const navigation = useNavigation();
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View
        style={{
          height: 150,
          alignItems: "center",
          justifyContent: "center",
          marginTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight
        }}
      >
        <Image
          source={{uri:route.params.user.photoUrl}}
          style={{ height: 110, width: 110, borderRadius: 60 }}
        />
      </View>
      <View style={{ height: 30, alignItems: "center" }}>
        <Text style={styles.naslov}>
          {route.params.user.name} {route.params.user.lastname}
        </Text>
      </View>
      <View style={{ height: 30, alignItems: "center" }}>
        <Text style={styles.naslov}>
          {route.params.user.email} 
        </Text>
      </View>
      <View style={{ height: 30, alignItems: "center", marginBottom: 10 }}>
        <Text style={styles.naslov}></Text>
      </View>
      <Divider />
      <ScrollView style={{ marginLeft: 5 }}>
        <TouchableOpacity
          style={{ marginTop: 20, marginLeft: 20 }}
          onPress={() => props.navigation.navigate("QR")}
        >
          <View style={{ padding: 10 }}>
            <Ionicons name="ios-qr-scanner" size={20} styles={{}}>
              <Text style={styles.naslov}> QR</Text>
            </Ionicons>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ marginTop: 20, marginLeft: 20 }}
          onPress={() => props.navigation.navigate("Odabir")}
        >
          <View style={{ padding: 10 }}>
            <Ionicons name="ios-qr-scanner" size={20} styles={{}}>
              <Text style={styles.naslov}> Odabir</Text>
            </Ionicons>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ marginTop: 20, marginLeft: 20 }}
          onPress={() => props.navigation.navigate("Odabir")}
        >
          <View style={{ padding: 10 }}>
            <Ionicons name="ios-qr-scanner" size={20} styles={{}}>
              <Text style={styles.naslov}> Odabir</Text>
            </Ionicons>
          </View>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
}
0
Ashwith Saldanha 3 Maret 2020, 10:21