demo native react_react-native init react_demo - CSDN
精华内容
参与话题
  • 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 官方 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-cli (1.2.0) 安装依赖 react-native (0.55.4) // ...

    React-native 官方 demo

    • 按官网提供方式安装 java jdk1.8.x, python 2.7.x, android-studio, android-sdk

    • 配置jdk, android 环境变量。

    • 安装 react-native-cli (1.2.0)

    • 安装依赖 react-native (0.55.4) // 注意指定版本,之前一直使用最新版本,demo跑不起来。

    • 连接设备(使用真机调试), 使用Android studio 中模拟器 跑不起来。

    • 配置adb 环境变量 (方便在任意cmd窗口查询设备连接情况)

      • 注: 之前我自行下载adb 工具, 发现跟sdk中adb版本不匹配,报错。
      • 使用 sdk platform-tools 目录下自带adb.exe 工具。
    • 测试设备连接情况

      • adb devices 若为
        List of devices attached
        6EB0217705000686        device
        复制代码
        则 设备已连接。
      • 若显示
        List of devices attached
        
        D:\wenrongjiao.com\react-native\my_first_app>
        复制代码
        则 表示无设备连接
      • 还有一种是已连接但是 显示 offline 则执行以下命令:
        adb kill-server
        adb start-server
        复制代码
        重新开启服务。
    • 使用react-native-cli脚手架初始化项目

      react-native init youProjectName
      复制代码
    • 修改 react-native 依赖包版本

      npm install react-native@0.55.4
      复制代码
    • 编译运行项目

      react-native run-android
      复制代码

      等待编译安装(初次编译安装时间比较长,可能要十几分钟)

    • 编译成功,设备上显示 Welcome to React Native! 字样。

    展开全文
  • react-native示例demo50个

    千次阅读 2019-07-31 17:14:21
    https://juejin.im/post/58f37cb361ff4b0058f9824a
    展开全文
  • 这阵子在学习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–导航栏+轮播图

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

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

    千次阅读 2016-06-26 10:03:48
    官方给我们提供了UIExplorer项目,这里边包含React Native的基本所有组件的使用介绍和方法。运行官方DEMO步骤如下 安装react native环境 React Native项目源码下载 下载安装cygwin软件 下载安装NDK然后安装以及...
  • 安装好react-native,通过react-native init xxxproject 再react-native run-android运行 安装好react-navigation相关可以看官网的文档。 文件目录: 其中几个Page页面都只是页面对应字改了一下而已。 ...
  • React Native电商项目实战React Native电商项目实战React Native电商项目实战React Native电商项目实战React Native电商项目实战
  • 2018年6月20最新编译React-Native官方demo,可直接运行版本。对应执行如下命令: 1.D:\reactnative\RNTester> react-native bundle --platform android --dev false --entry-file js/RNTesterApp.android.js --bundle...
  • useState 使用也和react一样,其他也一样就不多举例 import React, { Component, ...} from 'react-native'; export default function Flex () { const [count, setCount] = useState(0) const addCount = () =>
  • (一)前言 今天我们一起来看一下WebView组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩...
  • 自己在官方看了些资料 结合React Native 做了个小例子(官方是react+redux,我自己改的移动端react native + redux) 经过这次修改和练习,对于数据流,状态管理应用有了进一步的理解。 GIT ...
  • 这几篇博客的最终目地是为了给我自己做笔记,所以我不管文章... * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react'; import { Platform,
  • import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, DrawerLayoutAndroid, ListView, PixelRatio, Navigator, Scro
  • 项目路径:https://github.com/mrlzy/foodie.git  项目效果如下:    
  • 最近一直在学React Naitve,可以说React Native的确有他自身强大的地方,不管是运行效率还是热更新都和一般的h5有的一比,当然以为面世的时间还不算太久,版本更新又十分的快,所以坑也多,对于一般的移动开发者来说学习...
  • React Native 项目目录解析 上一节我们简单的新建了一个React Native的项目AwsoneProject,我们什么都没有操作,就直接在模拟器上运行起来了。这里我们详细的看看,React Native给我们生成的这几个文件到底是做什么...
  • React Native开发的仿美团小demo

    万次阅读 2016-01-04 16:04:53
    使用React Native开发的一个仿美团首页小demo, 源码:https://github.com/lookingstars/RNMeituan 运行说明: 首先需要安装好运行React Native的相关环境, 首先需要安装好运行React Native的相关环境, ...
  • 今天本想继续组件的学习,不过突然接到主管任务(其实也不算任务了,可能主管经验丰富知道该怎么开始学习一门新语言),让我们做个界面,截图发我(心里默默一声 天)截图如下(估计也是我们主管随便在那个APP上随便...
1 2 3 4 5 ... 20
收藏数 9,181
精华内容 3,672
关键字:

demo native react