React Native中点击Lungs Bank卡片实现跳转到下一屏幕的方法

React Native端的页面跳转通常基于React Navigation导航库实现，你只需要完成导航栈配置、给卡片绑定点击事件即可，具体操作如下：

• 提前确认导航配置
  你要跳转的目标页面必须提前注册到项目的导航栈中，注册示例如下：

import { createStackNavigator } from '@react-navigation/stack';
// 引入你要跳转的目标页面
import LungsBankScreen from '../screens/LungsBankScreen';

const Stack = createStackNavigator();

function RootNavigator() {
  return (
    <Stack.Navigator>
      {/* 原有其他页面的路由注册 */}
      <Stack.Screen name="LungsBank" component={LungsBankScreen} />
    </Stack.Navigator>
  )
}

• 获取导航实例
  在你当前写卡片的页面组件中，获取导航操作实例，函数组件可直接使用useNavigation钩子：

// 顶部引入钩子
import { useNavigation } from '@react-navigation/native';

// 组件内部代码
const YourCurrentComponent = () => {
  const navigation = useNavigation();
  // 原有其他逻辑
  return (
    // 原有页面结构
  )
}

• 给卡片添加点击跳转逻辑
  用可点击组件（推荐Pressable，也可以用TouchableOpacity）包裹你的CardStyle组件，绑定onPress触发跳转，修改后的业务代码如下：

<KeyboardAvoidingWrapper>
  <WelcomeStyledContainer>
    <StatusBar style="dark" />
    <OrganHeading>
      <OrganHeadingText>Donate Able Organ</OrganHeadingText>
    </OrganHeading>
    <View style={styles.container}>
      <View style={styles.Box}>
        <View style={styles.inerBox}>
          {/* 绑定点击跳转事件 */}
          <Pressable onPress={() => navigation.navigate('LungsBank')}>
            <CardStyle>
              <CardImage source={require('./../assets/organImage/lungs.png')} />
              <CardText>Lungs Bank</CardText>
            </CardStyle>
          </Pressable>
        </View>
      </View>
    </View>
  </WelcomeStyledContainer>
</KeyboardAvoidingWrapper>

如果需要点击反馈效果，可以给Pressable配置按下态样式，也可以直接替换为TouchableOpacity组件，自带透明度变化的点击效果。

内容的提问来源于stack exchange，提问作者Mian Muhammad Ramzan