react-native - 未定义不是对象（评估“navigation.navigate”）无法解析

Question

我是反应原生的新手。我正在研究自己的项目并遇到问题，希望你们能尽可能详细地帮助我。这个想法是当我在 HomeScreen 上单击“Daily Mix 1”专辑时，它将导航到 DailyMix1 屏幕。但它显示错误Undefined is not an object (evaluate 'navigation.navigate')如下图所示。组件 Album1 在 HomeScreen 内部，而包含导航功能的 TouchableOpacity 在 Album1 内部。

主屏幕

const HomeScreen = ({ navigation }) => {
  return (
    <ScrollView vertical={true} style={styles.scrollViewSetting}>
      <LinearGradient
        colors={['#783C50', 'black']}
        start={{ x: 0.5, y: 0 }}
        end={{ x: 1, y: 0.5 }}
      >
        <View style={styles.screenCover}>
          <StatusBar barStyle={"light-content"} translucent={true} backgroundColor='transparent' />
          <View>
            <FontAwesome
              name="cog"
              size={24}
              color="#969696"
              style={styles.settingIcon}
              onPress={() => {
                navigation.navigate("SettingsScreen");
              }}
            />
          </View>
          <View>
            <Album1 />
            <Album2 />
          </View>
        </View>
      </LinearGradient>
    </ScrollView>
  );
};

专辑1

const Album1 = ({ navigation }) => {
  return (
    <View>
      <View>
        <Text style={styles.headerStyle}>
          Made for you
        </Text>
      </View>
      <ScrollView horizontal={true}>
        <View style={styles.listAlbum}>
          {/*  */}
          <TouchableOpacity
            onPress={() => { navigation.navigate("DailyMix1") }}>
            <View>
              <AlbumItem
                name="Daily Mix 1"
                image={album_image_1}
                author="Shawn Mendes, Ed Sheeran"
              />
            </View>
          </TouchableOpacity>
          {/*  */}
          <View>
            <AlbumItem
              name="Daily Mix 2"
              image={album_image_2}
              author="The Chainsmokers, Clean Bandit"
            />
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

堆栈导航

const HomeStackNavigation = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                options={{
                    headerShown: false,
                }}
                name="Home"
                component={HomeScreen} />
                <Stack.Screen
                options={{
                    title: '',
                    headerTransparent: true,
                    headerBackTitle: ' ',
                    headerTintColor: 'white',
                    gestureEnabled: false,
                }}
                name="DailyMix1" component={DailyMix1} />
        </Stack.Navigator>
    );
};

每日混合1

const DailyMix1 = ({ navigation = this.props.navigation }) => {
    return (
        <View style={styles.background}>
            <StatusBar barStyle={"light-content"} translucent={true} />
            <View style={styles.firstView}>
                <LinearGradient
                    colors={['#52524B', '#121212']}
                    style={styles.linearGradient}
                    start={{ x: 0.95, y: 0.3 }}
                    end={{ x: 0.95, y: 0.95 }}
                >
                    <Image source={require('../components/assets/album1/album_image_1.png')} style={styles.imageStyle} />
                    <Text style={styles.nameStyle}>
                        Daily Mix 1
                    </Text>
                    <Text style={styles.subNameStyle}>
                        MADE FOR YOU
                    </Text>
                </LinearGradient>

            </View>
        </View>
    )
}

我尝试添加{ ...this.props }并<Album1 />更改naviation.navigate为Album1.js，this.props.navigation.navigate但它产生了相同的错误。

希望你们能帮助我，并告诉我在哪里进行任何更正。谢谢你。

标签： react-native

Answer 1

只需将导航道具传递给Album1组件

const HomeScreen = ({ navigation }) => {
  return (
    <ScrollView vertical={true} style={styles.scrollViewSetting}>
      <LinearGradient
        colors={['#783C50', 'black']}
        start={{ x: 0.5, y: 0 }}
        end={{ x: 1, y: 0.5 }}
      >
        <View style={styles.screenCover}>
          <StatusBar barStyle={"light-content"} translucent={true} backgroundColor='transparent' />
          <View>
            <FontAwesome
              name="cog"
              size={24}
              color="#969696"
              style={styles.settingIcon}
              onPress={() => {
                navigation.navigate("SettingsScreen");
              }}
            />
          </View>
          <View>
            <Album1 navigation={navigation}/> // Pass Navigation to Album1 as a prop
            <Album2 />
          </View>
        </View>
      </LinearGradient>
    </ScrollView>
  );
};