reactnative项目_reactnative 修改项目 - CSDN
  • 我们在开始搭建项目的时候,很多时候都是使用同一套架构,基本不会发生很多变化,有没有什么方法,能够进行批量化搭建项目,在react-native中就有一个简单的方法,搭建属于自己的模板方法,那就是使用命令行--...

    前言

    我们在开始搭建项目的时候,很多时候都是使用同一套架构,基本不会发生很多变化,有没有什么方法,能够进行批量化搭建项目,在react-native中就有一个简单的方法,搭建属于自己的模板方法,那就是使用命令行--template进行创建项目

    常规方法

    通常情况下,我们使用下面命令行进行项目搭建,如下面代码:

    react-native init projectName

    使用上面命令就会生成如下代码结构:
    react-native init projectName生成项目
    当我们进行通过使用下面命令

    react-native init projectNameTemplate --template common

    进行项目创建时,就能够生成我们自己自定义的项目,在上面这段命令行中,common指的是我在npm上发布的一个package,该包的全名是react-native-template-common,并且要能够在react-native中通过命令参数--template命令调用,必须使用下面这样的形式发不到npm官方仓库,形式如下所示:

    react-native-template-包名称

    请点击访问 common包在npm中的位置 ,如果想要查看具体代码可以到github进行查看common项目,项目结构如下所示:
    common项目github项目结构
    交代完上面准备工作之后,我们能够进行通过该命令进行项目的创建,如下,使用命令行创建之后的目录结构
    使用模板创建的react-native项目
    在创建之后,我们就可以通过如下说明信息进行运行项目

    To run your app on iOS:
       cd E:\projectTest\projectNameTemplate
       react-native run-ios
       - or -
       Open ios\projectNameTemplate.xcodeproj in Xcode
       Hit the Run button
    To run your app on Android:
       cd E:\projectTest\projectNameTemplate
       Have an Android emulator running (quickest way to get started), or a device connected
       react-native run-android

    参考文章

    1.使用 template 创建 React Native 应用更省时间

    展开全文
  • 项目源码下载:GitHub Popular 喜欢逛GitHub的小伙伴都知道,它有个查看最热项目的功能叫treding,但这个功能只能在网页上查看, 而且在手机上浏览显示效果很不友好,而我想在地铁上,餐厅,路上等空余的时间使用它...

    查看此项目的:视频开发教程

    喜欢逛GitHub的小伙伴都知道,它有个查看最热项目的功能叫trending,但这个功能只能在网页上查看,
    而且在手机上浏览显示效果很不友好,而我想在地铁上,餐厅,路上等空余的时间使用它,所以我需要一款带有这个功能的App,
    不仅于此,我还想要在这款App上查询GitHub上我所喜欢的项目,甚至在手机没网的时候也能看到,而且我想要我的iOS和Android手机都能使用这款App,
    于是GitHub Popular便诞生了。

    这个项目满足了我如下3方面的需求:

    1. 在手机App上也可以使用GitHub 的trending功能来查看最热最火的开源项目。
    2. 在手机App上也可以搜索GitHub上的开源项目,并且可以进行查看、收藏、分享等操作。
    3. 可以订阅我所喜欢的标签或语言,让感兴趣的热门项目一个不漏。

    githubpupular

    开发环境及工具

    环境:

    • OSX:10.11.6
    • Node.js:6.3.1
    • react-native:0.32.0

    工具:

    • Git
    • WebStorm
    • AndroidStudio
    • Xcode

    所用技术与第三方库

    所用技术

    • ES5/ES6
    • React
    • Flexbox
    • AsyncStorage
    • fetch api
    • Native Modules

    第三方工具

    • react-native-check-box
    • react-native-easy-toast
    • react-native-splash-screen
    • react-native-htmlview
    • react-native-parallax-scroll-view
    • react-native-scrollable-tab-view
    • react-native-sortable-listview
    • react-native-tab-navigator

    功能流程图

    GitHub Popular-功能结构图

    总结

    此项目是基于目前比较火的React Native技术架构的,也用到一些Android和iOS技术,其中Android、iOS两端代码复用率有90%之多,该项目占据我不少业余时间,不过总算研发完成,并成功上架。在此过程中填了不少的坑,包括GitHub没有开放trending的Api,需要自己动手实现它,以及自定义主题等等,后期有时间会整理出来分享给大家。

    GitHub Popular的Android版本已上架,大家可以从百度手机助手应用宝上下载使用,iOS版就差一个99刀的账号就可以上架了,囊中羞涩呜呜~~~~。项目开源在GitHub上供热爱移动开发的小伙伴学习研究,喜欢的小伙伴不要忘记点个赞支持一下哦。

    推荐学习:视频教程《React Native开发跨平台GitHub App》

    最后

    既然来了,留下个喜欢再走吧,鼓励我继续创作(^_^)∠※

    如果喜欢我的文章,那就关注我的博客@ devio.org吧,让我们一起做朋友~~

    戳这里,加关注哦:

    微博:第一时间获取推送
    个人博客:干货文章都在这里哦
    GitHub:我的开源项目

    展开全文
  • react-native 运行项目

    2018-06-27 19:01:57
    2.react-native run-android 打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以在android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者在手机模拟器上...

    打开cmd,找到项目所在位置,运行以下指令:

    1.npm install,安装项目依赖,有时可能需要翻墙,一般比较慢。

    2.react-native run-android  打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以在android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者在手机模拟器上安装,如果在手机安装,安装好后,进入程序,摇一摇手机,在弹出框上选择Dev settings,然后点击debugging,输入电脑的ip地址,要求手机与电脑处在同一wifi。

    3、react-native start,摇一摇手机,项目就开始在手机上运行了,可以点击弹框上的stop remote js debugging,在浏览器上会看到相应的信息,配合调试。

    作为一个新手,运行了我的第一个react-native项目,成功跑起来了,真是不容易,今天先写到这里,以后再更新。

    展开全文
  • React-Native的好丑就不多说了,有人说很好,有人说很多坑,自己去体会,不过向京东,微软,阿里等大公司都是在用RN的,至少目前Flutter不够成熟之前在我看来RN是比较不错的, 我就只说这一点相信有理由去学习RN了...

    React-Native的好丑就不多说了,有人说很好,有人说很多坑,自己去体会,不过向京东,微软,阿里等大公司都是在用RN的,至少目前Flutter不够成熟之前在我看来RN是比较不错的,

    我就只说这一点相信有理由去学习RN了  RN可以实现三端互通,IOS,android,web,具体可以参考 JDReact SDK。互通的好处就不用多说了吧,三端的人开发一套代码,如果原来一个项目组的人员配备是android3个,ios3个,web2个,那有RN后相当于8个人一起开发维护一套代码,轻松加愉快!

     

    那么重点来了,怎么快速开发RN项目

    其实官网文档说的很清楚了,不过我这里总结一下自己的一些体验。

    不论是在已有项目基础上开发RN项目还是全新开发一个RN项目,这个命令都是要用到的,在写这篇文章的时候RN0.56版本在window10系统和android上支持不太友好,建议用0.56之前的版本

    react-native init MyApp --version 0.55.4

    初始化一个项目之后就可以直接run了,那怎样算是run成功,自己看文档或者别的博客吧,这里说说怎么提升gradle版本和sdk支持,因为RN创建出来的项目gradle是2.2.3,compile sdk是23的,但是现在很多的开源框架或者第三方SDK都不适配这么低的版本

    那怎么改到更高版本,并且编译不出错?如下图所示

    其实改起来很简单,就直接在androidstudio里面找到对应的gradle文件修改就行,但是编译运行之后MainApplication和MainActivity继承的react native类会报红,虽然不影响运行,但是挺难看的,解决办法是打开RN项目下的android目录,删除.gradle和.idea缓存文件,再重新编译,那么一般不会报红了

    然后说说RN项目集成第三方SDK,如果想友盟这些有react native集成文档的最好不过,直接按照文档集成就行,如果没有文档的,那按照android或者ios的集成文档去集成,然后代码中只需要增加两个类,RN和原生通信的办法就是写一个交互类,并且继承ReactContextBaseJavaModule,其中getName返回的字符串是给RN调用的原生类名称,用@ReactMethod注解的方法是给RN调用的原生方法。且看代码(例子是集成智齿智能客服平台SDK)

    public class CustomerService extends ReactContextBaseJavaModule {
    
        public CustomerService(ReactApplicationContext reactContext) {
            super(reactContext);
        }
    
        @Override
        public String getName() {
            return "CustomerService";
        }
    
        @ReactMethod
        public void pushToCustomerService(String uid, String uname, String phone, String realname) {
            //智齿客服第三方接入
            Information info = new Information();
            info.setAppkey(BuildConfig.ZHICHI_APPKEY);
            info.setUid(uid);
            info.setUname(uname);
            info.setTel(phone);
            info.setRealname(realname);
            //返回时是否弹出满意度评价
            info.setShowSatisfaction(true);
            SobotApi.startSobotChat(MainApplication.getMyApplication(), info);
        }
    }
    public class CustomerReactPackage implements ReactPackage {
    
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    
            List<NativeModule> modules = new ArrayList<>();
            modules.add(new CustomerService(reactContext));
            return modules;
        }
    
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
    }

    最后在MainApplication中如下操作即可

    然后在RN代码中怎么调用?且看代码

    随便新建一个你喜欢的类,增加如下代码,(配合前面的代码理解),这代码的作用是RN和原生的连接器的作用,通过导出这个类,就可以调用之前写的原生方法和类

    'use strict';
    import {NativeModules} from 'react-native';
    
    export default NativeModules.CustomerService;
    

    调用方法,(随便写个点击事件,然后触发这个方法就可以测试一下,请结合前面原生代码理解)

    CustomerUtil.pushToCustomerService('a', 'a', 'a', 'a');

     

    展开全文
  • 再贴上最终最终成果效果图:(在Android模拟器运行效果图) reactNativeApp ...这是一个搭建好的react native项目架构,采用react-native官方推荐的react-navigation导航库,项目StackNavigator与T...

    先贴上最终成果代码地址:https://gitee.com/wuchunling/reactNativeApp.git

    再贴上最终最终成果效果图:(在Android模拟器运行效果图)

    reactNativeApp

    项目介绍

    这是一个搭建好的react native项目架构,采用react-native官方推荐的react-navigation导航库,项目StackNavigator与TabNavigator相结合使用。http请求采用axios库,并且自己封装好请求函数。数据管理采用redux。

    软件架构

    安装依赖包

    react / react-native / axios /redux / react-navigation

    redux-thunk / react-redux react-native-button / react-native-storage

    安装教程

    1. npm install 安装依赖包
    2. 运行模拟器
    3. react-native start
    4. react-native run-android / react-native run-ios

    使用说明

    1. 安卓设备reload JS:双击R
    2. IOS设备reload JS:Cmd+R

    项目代码结构

    • App.js 根组件
    • index.js 入口文件
    • src
      • api API接口文件夹
      • assets 静态资源文件夹
      • components 组件文件夹
      • redux 状态管理文件夹
        • actions 文件夹,存放各个模块的action
        • reducers 文件夹,存放各个模块的reducer
        • services 文件夹,存放各个模块的http请求接口
        • reducer.js 根reducer文件-combineReducers for rootReducer
        • store.js 项目store文件 - createStore(reducer,applyMiddleware(thunk))
      • routers
        • index.js 项目所有路由配置
        • tab.js 底栏tabbar路由配置
      • utils 工具文件夹
      • views 页面级组件文件夹

     

     

     

    以下进入正题,从零开始搭建我的react-native项目(这花费了我三天时间,之前从未接触过react-native,半天看react-native教程,一天搭环境,一天半写代码)

    一、前期准备工具

    1. 配置好 jdk

    2. 配置好 sdk

    3. 下载好模拟器(我是下载了Android Studio,直接使用里面的模拟器)

    4. 开发工具Atom,作为一个前端人员,真的不习惯用Android Studio编写代码,我还是继续用回我的Atom。改完代码Ctrl+S,再在模拟器上双击R,代码立即更新,要多方便有多方便,AS这烦人的东西根本用不着。

     

    二、项目初始化

    按照官网指示:react-native init MyProject

    三、运行模拟器(一定要先运行模拟器,等你跑项目的时候模拟器会自动打开你跑的项目)

    四、跑项目啦:

    react-native start        这一步是 Loading dependency graph,显示done的时候就可以执行下一步指令

    react-native run-android    build成功的话模拟器会自动打开项目

    可能跑完一堆爆红,项目没办法运行,这时候就看报错,一步一步排查,直到解决错误,看到 react-native的欢迎界面。接下来才可以进行代码的开发。

    一般的报错有 sdk platforms 版本问题,sdk platform-tools版本问题或sdk build-tools版本问题等等。根据提示去下载对应的版本即可。这里贴一个牛逼的地址,有各种版本供下载:http://mirrors.neusoft.edu.cn/android/repository/

     

     

    等项目运行成功就可以开始搭建自己的项目架构了。

    第一步,安装所需依赖包

    axios / redux / react-navigation / ……等等

     

    第二步,随意编写几个页面级组件供测试用

    Home/Goods/Me/Orders,以Home举例

    import React from 'react'
    import {Text} from 'react-native'
    
    class Home extends React.Component{
      render(){
        return(
          <Text>首页</Text>
        )
      }
    }
    export default Home;
    

     

    第三步,配置 tabbar的路由 src/routers/tab.js

    import React from 'react';
    import {createBottomTabNavigator} from 'react-navigation';
    
    import Home from '../views/Home'
    import Me from '../views/Me'
    import Goods from '../views/Goods'
    import Orders from '../views/Orders'
    
    const TabNav = createBottomTabNavigator(
      {
        Home:{screen:Home},
        Goods:{screen:Goods},
        Orders:{screen:Orders},
        Me:{screen:Me},
      },{
        initialRouteName: 'Home',
        tabBarOptions:{
          activeTintColor: '#FF7900', //当前选中的tab bar的文本颜色和图标颜色     
          inactiveTintColor: '#b2b2b2', //当前未选中的tab bar的文本颜色和图标颜色      
          showIcon: true, //是否显示tab bar的图标,默认是false    
          pressOpacity: 0.8, //按下tab bar时的不透明度(仅支持iOS和Android < 5.0).    
          style: { //tab bar的样式
              backgroundColor: '#fff',
              paddingBottom: 2,
              paddingTop:2,
              borderTopWidth: 0.1,
              borderTopColor: '#b2b2b2',
          }
        }
      }
    );
    export default TabNav;
    

     

    第四步:修改第二步创建的页面级组件,为它加上tabbar的icon图标和tabbar的textlabel,以Home举例

    import React from 'react'
    import {Text,Image,StyleSheet} from 'react-native'
    
    class Home extends React.Component{
      static navigationOptions = {
          tabBarLabel: '首页',
          tabBarIcon: ({focused}) => {
              if (focused) {
                  return (
                      <Image style={styles.tabBarIcon} source={require('../assets/navbar-home-icon-active.png')}/>
                  );
              }
              return (
                  <Image style={styles.tabBarIcon} source={require('../assets/navbar-home-icon.png')}/>
              );
          },
      };
      render(){
        return(
          <Text>首页</Text>
        )
      }
    }
    const styles = StyleSheet.create({
      tabBarIcon:{
        width:24,height:24
      }
    });
    export default Home;
    

     

    第五步:创建非tabbar页面的页面级组件Apples

    import React from 'react'
    import {Text} from 'react-native'
    
    class Apples extends React.Component{
      render(){
        return(
          <Text>苹果篮子</Text>
        )
      }
    }
    export default Apples;
    

     

    第六步:创建根路由文件 src/routers/index.js

    import { StackNavigator } from 'react-navigation';
    import TabNav from './tab'
    import Apples from '../views/Apples'
    const  AppNavigator = StackNavigator({ //整个应用的路由栈
        TabBar: {
            screen: TabNav,
            navigationOptions: ({navigation}) => ({
                header: null
            })
        },
        Apples: {screen: Apples}
      }
    );
    
    export default AppNavigator;
    

     

    第七步:修改根组件 App.js

    注释掉部分为redux接入,稍后再讲。

    import React, {Component} from 'react';
    import { Provider } from 'react-redux';
    
    //import store from './src/redux/store';
    import AppNavigator from './src/routers/index'
    
    export default class App extends Component{
      render(){
        return(
         // <Provider store={store}>
            <AppNavigator/>
        //  </Provider>
        )
      }
    }
    

     

    第八步:在Home页面加入跳转,跳转到Apple

    import React from 'react'
    import { View,StyleSheet,Text,Image,Button } from 'react-native'
    
    class Home extends React.Component{
      static navigationOptions = {
          tabBarLabel: '首页',
          tabBarIcon: ({focused}) => {
              if (focused) {
                  return (
                      <Image style={styles.tabBarIcon} source={require('../assets/navbar-home-icon-active.png')}/>
                  );
              }
              return (
                  <Image style={styles.tabBarIcon} source={require('../assets/navbar-home-icon.png')}/>
              );
          },
      };
      render(){
        const {navigate} = this.props.navigation;
        return(
          <View style={styles.container}>
            <Text>首页</Text>
            <Button
              onPress={() => navigate('Apples', {name: 'Brent'})}
              title="苹果篮子"
            />
          </View>
        )
      }
    }
    const styles = StyleSheet.create({
      tabBarIcon:{
        width:24,height:24
      },
      container:{
        padding:30
      }
    });
    export default Home;
    

     

     

    这样,路由就配置完成!至于redux的接入,跟react接入redux是一样的操作,可以参考上一篇文章【React】React全栈脚手架搭建-苹果篮子示例,去编写对应的 action / reducer / service。这部分代码react是什么样,react-native就是什么样,无需变化。变化的是组件的编写,组件名跟样式写法变了,其余逻辑部分都是保持不变。

    redux的结构可以如下。当然如果项目过大,更推荐以模块去分文件夹,把每个模块的action/reducers/services放在一起。

    根级store.js的编写

    import {createStore,applyMiddleware} from 'redux';
    import thunk from 'redux-thunk';
    import reducer from './reducer';
    
    let store = createStore(reducer,applyMiddleware(thunk))
    export default store;
    

    根级reducer.js的编写

    import { combineReducers } from 'redux';
    import appleReducer from './reducers/appleReducer';
    const rootReducer = combineReducers({
      appleBasket: appleReducer
    });
    
    export default rootReducer;
    

    最后只要在根组件App.js通过Provider注入store即可

    import React, {Component} from 'react';
    import { Provider } from 'react-redux';
    
    import store from './src/redux/store';
    import AppNavigator from './src/routers/index'
    
    export default class App extends Component{
      render(){
        return(
          <Provider store={store}>
            <AppNavigator/>
          </Provider>
        )
      }
    }
    

     

     

    这样,一个完善的具有路由,状态,请求的react-native项目就搭建完成。

     

     

    展开全文
  • 项目地址 https://github.com/fbsamples/f8app 2.Reading 来自饿了么RN大神开源的reading项目,已经完成Android和iOS双适配。绝对是一个产品级的开源项目,并且作者还在持续的更新。值得一荐! 项目...
  • 总体感觉RN更新速度很快,一些老的教程都不合适新的版本。初学乍道,确实感觉很坑。废话不多说,我们直接跨过山越过海,直接撸个综合项目,进行RN的学习。...ReactNative版本 react-native-cli: 2...
  • http://blog.csdn.net/marno__/article/details/71809757
  • 熟悉项目的结构,是开发的基本也是技术提升的一个重要途径,现总结下自己对react-native项目结构的分析与理解。正文项目结构init 的一个项目结构如图: tests:测试文件夹,执行命令 “npm test”会调用此文件夹,在...
  • 接下来就给大家分享一个典型的ReactNative项目实战课程。 课程简介 本套课程讲解了最新版本React Native的基础知识,借助Expo开发平台,实现了精美的美食App。课程中涵盖了RN中绝大多数API和组件的讲解,另外....
  • name】命令初始化项目的时候,创建的项目默认端口号为8081,所以当我们同时开启多个项目或者有其他任务进程占用8081端口号的时候就会报错,说端口号被占用,这时候我们就可以对当前React Native项目修改8081端口号,...
  • react native项目创建

    2017-05-10 13:53:07
    react native项目创建、运行、调试 1、项目命令行创建、运行 react-native init myrnprj1 // 创建工程 cd myrnprj1 react-native start // 开启packager服务--Running packager on port 8081. //浏览器地址栏输入...
  • 创建React Native项目 1.File->New->Project 2.在New Project窗口中选择React Native, 并根据情况, 修改项目路径和项目名称(我这里将untitled改为我的新项目ReactNativeDemo), 修改完成后, 点击create
  • 分享 50 个完整的 React Native 项目 原创 2017-04-17 勤劳的 ...
  • 之前就发现百度上,关于下载github上react native项目(下文称RN)运行的方法不全,今天抽空整理下,给大家一点灵感。一、下载RN项目以react-native-nba-app作为事例https://github.com/wwayne/react-native-nba-app...
  • 今天做项目时,在React Native中调用了原生组件,点击按钮时,程序就...最后找到了Android Studio运行React Native项目的方法。 1,在 android/app/src/main 目录下创建一个 assets空文件夹 mkdir android/app/s...
  • 运行别人写的react native项目demo遇到的问题 运行Demo步骤: 下载react native项目demo 终端打开项目目录,执行yarn install或npm install 运行在iOS模拟器上:react-native run-ios 我遇到的问题: 问题1: 首先...
  • WebStorm是一款前端开发工具,也可以用于React Native项目 下载安装WebStorm WebStorm下载地址 安装完不要运行webstrom 下载破解补丁 打开网址(IntelliJ IDEA 注册码),下载补丁 然后将补丁...
  • 前段时间开始学习React Native,然后试着开始做一个小项目,在练手的同时,分享出来希望和各位同学互相学习react-native项目。之前写过项目相关的文章,没看过的同学可以参考一下: React-native项目入门与思考...
  • 创建TypeScript版本的React Native项目 https://www.npmjs.com/package/react-native-template-typescript 1.使用typescript模板创建一个react native项目 react-native init MyApp --template typescript 2.运行新...
1 2 3 4 5 ... 20
收藏数 32,660
精华内容 13,064
关键字:

reactnative项目