React Native中如何从自定义组件内返回父页面

我来帮你排查这个导航问题，看了你的代码后，发现几个关键问题导致返回按钮无法工作，咱们一步步来修复：

问题1：Profile组件没拿到navigation对象 #

你的Profile组件里调用了navigation.goBack()，但Profile并没有接收到navigation属性——在ScreenOne中渲染<Profile name="HUFF" />时，没有把ScreenOne的navigation传递给它，所以Profile里的navigation是undefined，自然无法执行返回操作。

问题2：组件返回多个同级JSX元素 #

React Native要求组件的返回值必须是单个根元素，你的Profile直接返回了<Text>和<TouchableOpacity>两个同级元素，这会导致渲染报错，也会间接影响功能正常运行。

修复方案（两种可选） #

方案1：手动传递navigation props #

先修正Profile组件，添加根容器并接收navigation：

// 记得导入View组件
import { View, Text, TouchableOpacity } from 'react-native';

const Profile = (props) => {
  const { navigation, name } = props;
  return(
    <View>
      <Text>Hey {name}!</Text>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text>Go back</Text> {/* 建议给TouchableOpacity添加Text子元素，确保点击区域清晰 */}
      </TouchableOpacity>
    </View>
  );
}

然后在ScreenOne中传递navigation：

export function ScreenOne({ navigation }) {
  // 注意这里之前漏了return！
  return <Profile name="HUFF" navigation={navigation} />;
}

方案2：使用useNavigation钩子（更简洁） #

如果你不想手动传递navigation，可以用react-navigation提供的useNavigation钩子直接在Profile中获取导航对象：

import { View, Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const Profile = ({ name }) => {
  const navigation = useNavigation();
  return(
    <View>
      <Text>Hey {name}!</Text>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text>Go back</Text>
      </TouchableOpacity>
    </View>
  );
}

这种情况下，ScreenOne里无需传递navigation，直接写<Profile name="HUFF" />即可。

额外检查点 #

确认你的App组件中已经正确配置了导航容器，比如：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App(){
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
        <Stack.Screen name="ScreenOne" component={ScreenOne} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

确保ScreenTwo是通过navigation.navigate('ScreenOne')跳转到ScreenOne的，这样goBack()才能正确回到ScreenTwo。

内容的提问来源于stack exchange，提问作者HufF867