如何将按钮选择结果返回至React Navigation前一页面？

这里给你调整代码，实现「大/中/小」选项按钮的选择并返回结果到首页的功能：

修改后的HomeScreen代码 #

function HomeScreen({ route, navigation }) {
  // 监听参数变化，可选：如果需要在参数更新时做额外逻辑
  React.useEffect(() => {
    if (route.params?.selectedSize) {
      // 可在这里处理选中尺寸后的额外逻辑，比如状态同步、数据存储等
    }
  }, [route.params?.selectedSize]);

  return (
    <View>
      <Pressable
        onPress={() => navigation.navigate('CreatePost')}
      >
        <Text style={{ margin: 10 }}>选择尺寸：{route.params?.selectedSize || '未选择'}</Text>
      </Pressable>
    </View>
  );
}

修改后的CreatePostScreen代码 #

function CreatePostScreen({ navigation }) {
  // 封装尺寸选择逻辑，点击后直接返回首页并传递选中值
  const handleSelectSize = (size) => {
    navigation.navigate({
      name: 'Home',
      params: { selectedSize: size },
      merge: true,
    });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', gap: 10, padding: 20 }}>
      <Pressable
        onPress={() => handleSelectSize('大')}
        style={{ padding: 12, backgroundColor: '#e0e0e0', borderRadius: 8 }}
      >
        <Text style={{ textAlign: 'center', fontSize: 16 }}>大</Text>
      </Pressable>
      <Pressable
        onPress={() => handleSelectSize('中')}
        style={{ padding: 12, backgroundColor: '#e0e0e0', borderRadius: 8 }}
      >
        <Text style={{ textAlign: 'center', fontSize: 16 }}>中</Text>
      </Pressable>
      <Pressable
        onPress={() => handleSelectSize('小')}
        style={{ padding: 12, backgroundColor: '#e0e0e0', borderRadius: 8 }}
      >
        <Text style={{ textAlign: 'center', fontSize: 16 }}>小</Text>
      </Pressable>
    </View>
  );
}

关键修改点说明 #

• HomeScreen：

  • 修复了navigation的声明方式（通过解构参数获取，符合React Navigation规范）
  • 统一参数名为selectedSize，显示时增加「未选择」默认文本，提升用户体验
  • 保留useEffect监听参数变化，方便后续扩展业务逻辑

• CreatePostScreen：

  • 移除了无用的postText状态，直接通过点击事件传递选中的尺寸值
  • 新增三个独立选项按钮，分别对应「大/中/小」，点击后直接返回首页并携带参数
  • 添加基础按钮样式，让界面更直观（可根据需求自定义样式）

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