react-native实现新建页面+路由跳转

最新推荐文章于 2025-06-04 09:20:20 发布

就像风1样

最新推荐文章于 2025-06-04 09:20:20 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： ReactNative 文章标签： react-native rn 页面跳转

本文链接：https://blog.youkuaiyun.com/qq_42221334/article/details/86294003

本文详细介绍了如何在React-Native中创建新页面并实现页面间的路由跳转。首先，创建新页面文件，然后在App的index.js中注册新页面，在全局index.js中引入并配置路由。最后，在需要跳转的页面中设置按钮的onPress事件来触发页面切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤：

1.新建一个新页面，即自己所需要的文件（拜访新消息）

配置：

static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;
    return {
      headerBackImage: <BackImage />,--返回按钮
      headerRight: null
    }
  }

2.在src\containers\App\index.js中注册：

export * from '../Visiting/components/VisitNewsList'

3.在src\index.js中进行引入：

import {
  VisitingScreen,
  VisitNewsList,
  （文件名）
} from './containers/App'

4.仍旧index中，找到

const AppNavigator = createStackNavigator(...)

进行配置路由：

VisitNewsListScreen: {----路由名
    screen: VisitNewsList,----文件名
    navigationOptions: () => ({
      title: '新消息',
      ...navigationOptionsMainStyle,
      headerBackground: <HeaderBackgroundView/>
    }),
  },

5.在要跳转的主页面即跳转入口：（拜访首页）

点