新版导航条stacknavigator

川长思鸟来 2022-05-23 12:25 188阅读 0赞

项目目录

![20180611141828354][]

index.js是入口文件

这是index。js里的内容：

import { AppRegistry } from 'react-native';
    import App from './App';
    
    AppRegistry.registerComponent('App_process', () =>App);

引入APP。js,并抛出。

APP.js文件是过度文件，引入导航器，抛出导航器

import AppNavigator from './js/navigators/AppNavigator'
    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' +
        'Cmd+D or shake for dev menu',
      android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
    });
    
    type Props = {};
    export default class App extends Component<Props> {
      render() {
        return (
            <AppNavigator />
        );
      }
    }

在导航器appNavigator。js 文件里引入各个要跳转的页面

AppNavigator'

import {
       StackNavigator} from 'react-navigation';
    // import WelcomePage from '../page/WelcomePage';
    import HomePage from '../page/HomePage';
    
    export default AppNavigator = StackNavigator({
        // WelcomePage: {
        //     screen: WelcomePage
        // },
        HomePage: {
            screen: HomePage
        },
    
    
    }, {
        navigationOptions: {
            header: null }
    })

然后编写各个页面

[20180611141828354]: /images/20220523/695a52303226417ea9981fef0c42a72f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关导航条动态居中

导航条动态居中效果： ![在这里插入图片描述][20200907172208399.gif_pic_center] 备注都在代码里了，各位看官请自便。代码

落日映苍穹つ/ 2022年12月04日 09:17/ 0 赞/ 125 阅读

相关 Bootstrap导航条

一、默认的导航条在制作一个基础导航条时，主要分以下几步： 1、在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”；

川长思鸟来/ 2022年06月17日 10:17/ 0 赞/ 209 阅读

相关导航条的制作

要点： 1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上

川长思鸟来/ 2022年06月14日 06:24/ 0 赞/ 183 阅读

相关 react-native 使用 StackNavigator 导航器跳转页面

弄了一天，终于跑起来了，可以说历经千辛万险！最好的教程是React Navigation的官网：[https://reactnavigation.org/][https_

电玩女神/ 2022年06月06日 14:12/ 0 赞/ 273 阅读

相关新版导航条stacknavigator

项目目录 ![20180611141828354][] index.js是入口文件这是index。js里的内容： import { AppRegistr

川长思鸟来/ 2022年05月23日 12:25/ 0 赞/ 189 阅读

相关 Rect Naviagtion-StackNavigator

一、用途官方文档介绍StackNavigator的用途是：为你的应用程序提供一种在每个新屏幕放置在堆栈顶部的屏幕之间转换的方法。举个例子：你在头条浏览一个新闻列表，

川长思鸟来/ 2022年05月13日 01:10/ 0 赞/ 166 阅读

相关导航条

用无序列表编写的简单一级导航条  <!doctype html> <html> <head>

迈不过友情╰/ 2022年05月03日 02:30/ 0 赞/ 205 阅读

相关 Bootstrap3-导航条

1. 定义导航条  <div class="navbar nav-bar-default"> <ul c

╰+攻爆jí腚メ/ 2021年09月19日 02:34/ 0 赞/ 318 阅读

相关 react-native系列(14)导航篇：页面导航StackNavigator参数及使用详解

react-navigation导航是RN官网推荐使用的导航插件，目前最新版本为3.x，它包括3种类型的导航： StackNavigator TabNavigat

心已赠人/ 2021年09月18日 10:48/ 0 赞/ 904 阅读

相关导航条样式代码

参考博文:[这里写链接内容][Link 1] <!DOCTYPE html> <html lang="zh-CN"> <head> <

绝地灬酷狼/ 2021年09月17日 07:06/ 0 赞/ 323 阅读