React native “未定义”不是无法解析的对象（评估和导航。导航和）

我是个新来的本地人。 我正在研究我自己的项目，遇到了问题，希望你们能尽可能详细地帮助我。 我的想法是，当我在主屏幕上点击“DailyMix1”专辑时，它将导航到DailyMix1屏幕。但它显示错误未定义不是对象（评估“navigation.navigate”）如下图所示。组件Album1位于主屏幕内，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>
  );
};

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

const主屏幕=（{navigation}）=>{
返回(
{
导航。导航（“设置屏幕”）；
}}
/>

我尝试在
中添加
{…this.props}
，并将
Album1.js中的
导航
更改为
this.props.navigation.navigate
，但产生了相同的错误

希望你们能帮助我，并告诉我在哪里进行任何更正。谢谢。
只需将导航道具传递到
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>
  );
};


常量主屏幕=（{navigation}）=>{
返回(
{
导航。导航（“设置屏幕”）；
}}
/>
//将导航作为道具传递到Album1
);
};
如果您确定导航与props.navigation相同，您可以试试。它很有效

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} />
                <Album2 navigation={navigation} />
              </View>
            </View>
          </LinearGradient>
        </ScrollView>
      );
    };

const主屏幕=（{navigation}）=>{
返回(
{
导航。导航（“设置屏幕”）；
}}
/>
);
};


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

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} />
                <Album2 navigation={navigation} />
              </View>
            </View>
          </LinearGradient>
        </ScrollView>
      );
    };