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

HomeScreen

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

Album1

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

StackNavigation

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

DailyMix1

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>
    )
}

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

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