demo native 最新react_react-native init react_demo - CSDN
  • react-native 配合react-navigation 入门demo,使用api包括, createMaterialTopTabNavigator, createAppContainer, createBottomTabNavigator, createAppContainer,以及使用了图标react-native-vector-icons。
  • React实战-如何快速构建一个ReactNativeDemo ReactJs宣称的是一次学习就够了,意思是学习了ReactJs后,在Web端和移动端就都一样处理了。事实是否真的是这样呢?在实际的应用过程中会发现,现实并非如口号叫的那么...

    React实战-如何快速构建一个ReactNativeDemo

    ReactJs宣称的是一次学习就够了,意思是学习了ReactJs后,在Web端和移动端就都一样处理了。事实是否真的是这样呢?在实际的应用过程中会发现,现实并非如口号叫的那么好听,但也并非完全从头学起,但是在学会了ReactJs后,开始编写ReactNative的过程中,由于对原理了解并不深刻,会遇到各种坑。如果不扫清这些坑,会让你在第一个demo正常展示前耗费你大量的时间,让你感到沮丧(weixin:react实战)。

    还是以android环境为例从安装开始,到实现第一个最基本的数据集展示和数据集操作的demo吧。

    1.环境配置

    一般来说,我们安装ReactNative官网中的步骤,依次执行就能正常配置。

    安装node,python2,react-native-cli,再安装Android Studio.

    创建一个PersonListDemo程序:react-native init PersonListDemo

    再执行 react-native run-android

    坑:以上是官网的步骤。但是如果只是这样就会发现会出错:app:installDebug的错误。如果以前没做过移动端的人会感觉莫名其妙,其实这个错误是应用安装调试失败。我们调试、测试的方法很多,主要包括:模拟器、真机。模拟器的安装可以包含在Android Studio中。如果在模拟器上调试的话,应先启动模拟器。最简单的方法是记住两条命令:

    显示当前模拟器 emulator -list-avds;

    启动模拟器 emulator -avd Nexus_6

    启动模拟器后,基本上能无障碍出现HelloWorlddemo了。

    2.建立自己的demo

    出现HelloWorld后会让我们欣喜,然后就开始动手构建自己的demo

    等你开始后会发现ReactNative中的componentReact中相去甚远,相同的只是思想和方法。我们暂且抛开iosandriod的区别,还是专注于ReactNativeReactNative中的基础component中有View,Text,Flexbox,ListView,Navigator等,这些跟ReactJs中用法类似,部分名字也类似。但是还是需要重新了解。

    最常犯的错:

    l Component 没有export

    l Componentreturn的不是一个元素对象。

    l Stylecolor并没有Web中的设置,如:’white’等。

    数据显示的方式和ReactJs中一样,只是采用的控件不同而已:

    <ScrollView style={style.personlist}>

         {

          PersonList.map(person => {

          return person.sex === 'F' ?

          <Text  style={{color: 'red'}}> { person.name } </Text> <Text  style={{color: 'blue'}}> { person.name }

          } )

         }

         </ScrollView>

    Navigator的使用:在ReactJs中我们采用的是Rutor,在React-native中基础控件式Navigator。用于页面跳转,下面是一个简化的Navigator写法。

    class MyNavigator extends Component{

    onForword(route,navigator){

    navigator.push({index: route.index+1});

    }

    onBack(route,navigator){

    navigator.pop();

    }

    render(){

    return (

        <Navigator

          initialRoute={{index: 0 }}

          renderScene={(route, navigator) => {

           switch(route.index){

           case 0:

           return <Login onForword={()=>this.onForword(route,navigator)} />;

           case 1:

           return <Dashborder onBack={()=>this.onBack(route,navigator)}

           onForword={()=>this.onForword(route,navigator)} />;

           case 2:

           return <AddPerson onBack={()=>this.onBack(route,navigator)}/>;

           default:

           return <Login />;

           }         

          }

      }/>

       );

    }

    }

    等你看完了这些,是否又有些想骂娘了,说好的学一次呢,又要重新学了。至于数据操作方式和ReactJs中并非无差别了。

    展开全文
  • 安装好react-native,通过react-native init xxxproject 再react-native run-android运行 安装好react-navigation相关可以看官网的文档。 文件目录: 其中几个Page页面都只是页面对应字改了一下而已。 ...

    前置条件:

    1. 安装好react-native,通过 react-native init xxxproject
    2. 再react-native run-android运行
    3. 安装好react-navigation相关可以看官网的文档。

    文件目录:

    其中几个Page页面都只是页面对应字改了一下而已。

     

    AppNavigator.js

    import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
    
    import WelcomePage from '../pages/WelcomePage'
    import DetailPage from '../pages/DetailPage'
    import HomePage from '../pages/HomePage'
    
    const MainNavigator = createStackNavigator({
      HomePage: {
        screen:HomePage,
        navigationOptions: {
          header: null
        }
      },
      DetailPage: {
        screen:DetailPage
      }
    });
    const InitNavigator = createStackNavigator({
       WelcomePage: {
        screen:WelcomePage,
        navigationOptions: {
          header: null
        }
      }
    });
    
    export default createAppContainer(createSwitchNavigator(
      {
        Init: InitNavigator,
        Main: MainNavigator,
      },
      {
        initialRouteName: 'Init',
      }
    ));
    

    SwitchNavigator 的用途是一次只显示一个页面。 默认情况下,它不处理返回操作。我们可以通过它做一个一开始初始化欢迎页面,以及后续展示页面。

    header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null

     

    welcomePage.js

    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View} from 'react-native';
    import NaivgationUtil from '../navigator/NavigationUtil';
    
    type Props = {};
    export default class WelcomePage extends Component <Props> {
        componentDidMount() {
            this.timer = setTimeout(() => {
                NaivgationUtil.resetToHomePage({
                    navigation: this.props.navigation
                })
            }, 2000);
        }
        componentWillUnmount() {
            this.timer&&clearTimeout(this.timer);
        }
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>WelcomePage</Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    

    通过挂载定时器来定时跳转,同时记得销毁定时器。

    NaivgationUtil.js 

    作为一个util文件 需要的公共方法的提取

    export default class NaivgationUtil {
        static goPage(params, page) {
            const navigation  = NaivgationUtil.navigation;
            if(!navigation) {
                console.log('navigation can not be null')
                return;
            }
            navigation.navigate(
                page,
                {
                    ...params
                }
            )
        }
        static goBack(navigation) {
            navigation.goback();
        }
        static resetToHomePage(params) {
            const { navigation } = params;
            navigation.navigate('Main');
        }
    };

    同时需要将index.js入口文件进行修改一下

    /**
     * @format
     */
    
    import {AppRegistry} from 'react-native';
    import AppNavigator from './js/navigator/AppNavigator'
    import {name as appName} from './app.json';
    
    AppRegistry.registerComponent(appName, () => AppNavigator);
    

    接着需要一个顶部的tab

    tab.js

    tab中引入了需要的页面.

    icons用了react-native-vector-icons 里面的三个类。安装react-native-vectors-icons 除了npm 以外还需要react-native link react-native-vector-icons 来进行自动关联。

    方法较为类似,有screen对应页面,以及options对应的其他选项的配置,包含标题,icon。

    import React from 'react';
    import {
        createBottomTabNavigator,
        createAppContainer
    } from 'react-navigation';
    
    import FavoritePage from './FavoritePage';
    import MyPage from './MyPage';
    import PopularPage from './PopularPage';
    import TrendingPage from './TrendingPage';
    import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
    import Ionicons from 'react-native-vector-icons/Ionicons';
    import FontAwesome from 'react-native-vector-icons/FontAwesome';
    
    const TabNavigator = createBottomTabNavigator({
        FavoritePage: {
            screen: FavoritePage,
            navigationOptions: {
                tabBarLabel: "收藏",
                tabBarIcon: ({tintColor, focused}) => (
                    <MaterialIcons
                        name={'favorite'}
                        size={26}
                        style={{color: tintColor}}
                    />
                )
            }
        },
        MyPage: {
            screen: MyPage,
            navigationOptions: {
                tabBarLabel: "我的",
                tabBarIcon: ({tintColor, focused}) => (
                    <FontAwesome
                        name={'user'}
                        size={26}
                        style={{color: tintColor}}
                    />
                )
            }        
        },
        PopularPage: {
            screen: PopularPage,
            navigationOptions: {
                tabBarLabel: "最热",
                tabBarIcon: ({tintColor, focused}) => (
                    <MaterialIcons
                        name={'whatshot'}
                        size={26}
                        style={{color: tintColor}}
                    />
                )
            }
        },
        TrendingPage: {
            screen: TrendingPage,
            navigationOptions: {
                tabBarLabel: "趋势",
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={'md-trending-up'}
                        size={26}
                        style={{color: tintColor}}
                    />
                )
            }   
        },
    });
    
    export default createAppContainer(TabNavigator);

     top.js

    同样和底部较为类似。

    
    import {
        createMaterialTopTabNavigator, createAppContainer
    } from 'react-navigation';
    
    import Tab1 from './Tab1';
    import Tab2 from './Tab2';
    const TabNavigator = createMaterialTopTabNavigator({
        PopularTab1: {
            screen: Tab1,
            navigationOptions: {
                tabBarLabel: "tab1"
            }
        },
        PopularTab2: {
            screen: Tab2,
            navigationOptions: {
                tabBarLabel: "tab2"
            }
        }
    });
    
    export default createAppContainer(TabNavigator);

    最后还有一个详情页面的跳转:

    tab1.js

    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View} from 'react-native';
    
    type Props = {};
    import NavigatorUtil from '../navigator/NavigationUtil'
    export default class Tab1 extends Component <Props> {
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>PopularPage1</Text>
            <Text onPress={() => {
                NavigatorUtil.goPage({
                    navigation: this.props.navigation
                }, "DetailPage")
            }}>跳转到详情页</Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    

     

    结果显示:

    demo下载:

    https://download.csdn.net/download/qq_37021554/11094521 

    展开全文
  • gitclone地址:...大家装好react-native环境后,把这个demo下载好,使用yarn安装依赖(npm不可以正常安装) 然后运行react-nativerun-android,等待大概10分钟,即可看到demo效果。 ...

    git clone地址:https://github.com/ywltoread/react-navigation-redux.git

    大家装好react-native环境后,把这个demo下载好,使用yarn安装依赖(npm不可以正常安装)

    然后运行react-native run-android,等待大概10分钟,即可看到demo效果。

     

    展开全文
  • 这阵子在学习react native, 说实话,坑真多!!!学习的过程也是不断的踩坑,艰难前进,这几天也断断续续的做了一个非常简单的demo.用到的技术: react native 样式、布局 react-navigation 轮播图 react-native-...

    这阵子在学习react native, 说实话,真多!!!学习的过程也是不断的踩坑,艰难前进,这几天也断断续续的做了一个非常简单的demo.


    用到的技术

    • react native 样式、布局

    • react-navigation

    • 轮播图

    • react-native-video

    • 网络


    平台

    Android、window系统 、Genymotion模拟器、vscode、已经配好的react native 环境


    准备条件


    效果如下


    这里写图片描述


    这里写图片描述


    这里写图片描述


    这里写图片描述


    下一篇:开发一个基于React Native的简易demo–导航栏+轮播图

    展开全文
  • React-Native Demo 购物app

    2019-03-14 01:59:42
    购物app shopping-react-native一、前言整个代码,仅供参考,对于一个有经验的开发人员,从看js Reactjs React-Native 到写demo总共2天时间就够了,由于没有做过前端,代码写的一般,见谅;后去会持续更新**代码在...

    购物app shopping-react-native

    一、前言

    整个代码,仅供参考,对于一个有经验的开发人员,从看js Reactjs React-Native 到写demo总共2天时间就够了,由于没有做过前端,代码写的一般,见谅;后去会持续更新
    
    **代码在底部**
    

    二、环境配置

    (1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦。
    (2)在Mac上安装Xcode,建议Xcode 6.3以上版本
    (3)安装node.js:https://nodejs.org/download/
    (4)建议安装watchman,终端命令:brew install watchman
    (5)安装flow:brew install flow
    

    三、Hello, React-Native

    创建一个React-Native的项目,因此可以按照下面的步骤:
    打开终端

    (1)安装命令行工具:sudo npm install -g react-native-cli
    (2)创建一个空项目:react-native init HelloWorld
    (3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
    (4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。
    (5)android 开发者请安装android开发环境,后打开模拟器 使用react-native run-android命令来运行程序
    

    启动完成后,你会看到React-Packger和iOS模拟器(android模拟器)

    四、shopping-react-native demo

    图片轮播使用的是三方组件react-native-swiper,我们启动npm命令行,在项目的根目录使用如下命令安装模块。

    $ npm install react-native-swiper --save
    $ npm i react-timer-mixin --save
    

    实战内容

    9宫格,轮播图,导航栏,tab栏,Webview,ListView,ScrollView等
    

    效果图预览

    这里写图片描述


    这里写图片描述


    这里写图片描述


    这里写图片描述


    ###代码地址
    github地址
    https://github.com/bigsui/shopping-react-native.git

    展开全文
  • react native fetch demo

    2020-07-19 23:33:26
    react native 使用 fetch 进行网络请求,fetch 的封装以及调用实例 (fetch demo) 1》下载该文件 2》使用命令行工具输入命令:react-native init ZXJNetDemo 3》将下载的文件中的.js 文件 放到刚生成项目的...
  • react-native示例demo50个

    2019-07-31 17:14:21
    https://juejin.im/post/58f37cb361ff4b0058f9824a
  • React-native 官方 demo

    2019-02-27 02:11:03
    React-native 官方 demo 按官网提供方式安装 java jdk1.8.x, python 2.7.x, android-studio, android-sdk 配置jdk, android 环境...安装依赖 react-native (0.55.4) // 注意指定版本,之前一直使用最新版本,demo...
  • 最近一直在学React Naitve,可以说React Native的确有他自身强大的地方,不管是运行效率还是热更新都和一般的h5有的一比,当然以为面世的时间还不算太久,版本更新又十分的快,所以坑也多,对于一般的移动开发者来说学习...
  • React Native Demo

    2020-07-29 14:18:26
    一个关于react-nativedemo, 各种控件比较齐全,基于2018-2-22最新的RN写就!
  • 云生活超市——React Native项目,React Native电商app,(项目配套:1、后台管理系统(React ant-design) 2、服务器端代码(SpringBoot)。技术栈: react native redux react-navigation native-base
  • 2018年 React Native

    2018-07-22 17:21:23
    自从上次发布关于React Native的更新状态已经有一段时间了。 在Facebook内部,我们将React Native技术应用到更多的重要项目中。我们最受欢迎的产品之一是Marketplace,作为我们的顶级应用,每月有8亿人使用。自2015...
  • 这个只是一个简单的页面跳转,但是前期配置环境配置了一周,还是发上来留个纪念哈哈
  • 第一次成功的编译react-native + react-native-webrtc android app 好几天了,都不见成效由于不了解android 的编译过程只熟悉js所以走了很多弯路,重新学习gradle(android编译需要gradle)参考了很多网站,最终编译...
  • 安装react-native-video npm install react-native-video --save IOS环境下-手动链接: 1.在Xcode中打开项目,在Libraries上单击右键,然后选择"Add Files to..." 2.在本地目录下,找到对应的项目文件-------node...
  • 该项目在http://www.lcode.org/study-react-native-opensource-two/上发现 ...上边这个开源的react native代码是一个基于React Native和MobX实现的美食类App。 同时支持ios&amp;android,代码下载地址:ht...
  • Android放下很久了,前段时间一直扎根于前端三大件(HTML、CSS、JavaScript)的学习,目的呢是想为之后的学习React Native学习做好准备。趁着离考试还有一段时间,也是重新走上Android开发的道路。 现在确实是移动...
  • 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。 通过《React ...
  • 项目路径:https://github.com/mrlzy/foodie.git  项目效果如下:    
1 2 3 4 5 ... 20
收藏数 9,073
精华内容 3,629
关键字:

demo native 最新react