2019-04-28 10:19:19 qq_35716392 阅读数 82
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

1.先给项目添加该库;

npm install --save react-native-vector-icons

 

配置:

1.自动配置:(我这边使用这种配置方法报错了,然后使用的下面手动配置方法)

react-native link react-native-vector-icons

 

2.手动配置:

第一步:将node_modules/react-native-vector-icons/Fonts中你所需要使用到的字体文件复制到/app/src/main/assets/fonts ,没有assets文件夹的新建即可;

第二步:android/app/ build.gradle:

dependencies {
   compile fileTree(dir: "libs", include: ["*.jar"])
   compile project(':react-native-vector-icons') //添加此文件
   compile "com.android.support:appcompat-v7:23.0.1"
   compile "com.facebook.react:react-native:+"  // From node_modules
}

第三步.配置 android/settings.gradle:

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

第四步:修改android\app\src\main\java\com\myproject\MainApplication.java:

 

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import com.oblador.vectoricons.VectorIconsPackage;//新增此文件

import com.facebook.soloader.SoLoader;

 

@Override
protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new VectorIconsPackage()//新增此文件
        );
}

第五步:重新react-native run-android即可。
 

2016-09-25 13:12:09 zhangbuzhangbu 阅读数 3374
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

调试React-Native有两种场景,第一种是通过react-native run-ios(或者run-android)启动应用,第二种是打开已经安装在手机的Debug版本。

1)通过react-native run-ios(或者run-android)启动应用后,要调试应用就比较简单,在配置过Js Server的ip和port后,当应用上显示已经成功时,即可通过编辑js源文件,然后保存。再次刷新应用界面即可进行调试

2)如果不想再次通过react-native run-ios(或者run-android)启动调试过程,可以在打开安装好的Debug版本之前,通过Atom的Nuclide工具启动Js Server。然后就可以直接通过修改js文件调试


2019-10-31 15:48:15 xxlyzgt 阅读数 482
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

简单介绍下react-native-webview 替换  react-native 自带的 webview 的过程中 遇到的问题。

基于版本:

 "react-native": "0.60.6",
 "react-native-webview": "^7.4.2",

1、安装及使用方法就省略了,可以看下react-native-webview这个文档。

2、react-native-webview 与 h5 交互。

 下面写出react-native-webview 的 webview 里的主要代码: 

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

/**
 * onMessage 接收HTML5 发送给 RN Webview 的消息
 *
 */

onMessage = (event) => {
    
    let data = JSON.parse(event.nativeEvent.data);
    
    console.log("接收到的来自于html5的消息",data);
}


/**
 * RN Webview 发送消息给 HTML5 
 * data  object
 *
 * 通过调用触发该函数
 */

postMessageToH5(data){
    
   this.webView.injectJavaScript(`
       (function(){
          window.postMessage(${JSON.stringify(data)},'*');
       })();
       true;
   `)

}


class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{ uri: 'https://infinite.red' }}
        style={{ marginTop: 20 }}
        ref={webView => this.webView = webView}
        onMessage={this.onMessage}
      />
    );
  }
}

接下来写一下html5里的主要代码部分:

<script>
    /**
     * 发送消息给RN webview
     */
    function onClick() {
        let postData = {
            type: 1,
            title: "测试"
        }
        // 发送消息
        if(window.ReactNativeWebView){
            window.ReactNativeWebView.postMessage(JSON.stringify(postData))
        }
    }
    /**
     * 监听RN webview 发送到 html5 的消息   
     */
    window.onload = function(){
        window.addEventListener("message",function(msg){
            let data = JSON.stringify(msg.data);
            console.log("接收RN发送过来的消息",data);
        })
    }
    
</script>

以上就是react-native-webview 与HTML5 的交互。跟 之前版本的 react-native 里的自带的Webview 与 html5  交互略有区别。 

 

3、react-native-webview 里的 originWhitelist 属性使用,把原本的

originWhitelist={['*']}

 替换写成

originWhitelist={["https://*", "http://*", "file://*", "sms://*", "tel://*"]}

这种方式可以解决一些链接报错问题。例如net :: ERR_UNKNOWN_URL_SCHEME 的问题。

2017-11-01 11:18:57 qq_31303013 阅读数 602
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

最近开始学习React-native ,遇到底部导航  ,一直在报错误。

最后找到解决办法,快被整哭啦。。。。

  第一步 导入框架,npm install react-native-tab-navigator --save

第二步;在用到react-native-tab-navigator 的页面

import TabNavigator from 'react-native-tab-navigator';
第三步:构造方法

constructor(props) {
  super(props);
  // 初始状态
  this.state = {
      selectedTab:'home'
  };

}
第四步:

// 返回TabBarItem
renderTabBarItem(title, selectedTab, image, selectedImage, view ) {
    return(
        <TabNavigator.Item
            selected={this.state.selectedTab === selectedTab}
            title={title}
            selectedTitleStyle={{color:'black'}}
            renderIcon={() => <Image source={{uri:image}} style={styles.tabbarIconStyle} />}
            renderSelectedIcon={() => <Image source={{uri:selectedImage}} style={styles.tabbarIconStyle} />}
            onPress={() => this.setState({ selectedTab: selectedTab })}>
                {view}  //不需要用到Navigator,直接把需要的页面加进来就可以了
                      
        </TabNavigator.Item>
    );
}
第五步:
render() {
    return (
        <TabNavigator>
            {/* 首页 */}
            {this.renderTabBarItem("首页",'home','tabbar_home_30x30','tabbar_home_selected_30x30',<GDHome />)}
            {/* 海淘 */}
            {this.renderTabBarItem("海淘",'ht','tabbar_abroad_30x30','tabbar_abroad_selected_30x30',<GDHt />)}
            {/* 小时风云榜 */}
            {this.renderTabBarItem("小时风云榜",'hourlist','tabbar_rank_30x30','tabbar_rank_selected_30x30',<GDHourList/>)}
        </TabNavigator>
    );
}






2019-02-27 15:21:09 weixin_44557421 阅读数 1235
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

RN使用react-native-image-picker + aliyun-oss-react-native 上传图片


今天记录一下在RN使用react-native-image-picker以及aliyun-oss-react-native完成上传图片

如果是原生和RN混合开发,首先执行以下代码:

yarn add react-native-image-picker
yarn add aliyun-oss-react-native

然后在Android添加依赖:
1.在android/settings.gradle里增加代码:

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')

include ':aliyun-oss-react-native'
project(':aliyun-oss-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/aliyun-oss-react-native/android')

2.在android/app/build.gradle里增加代码:

dependencies {
+		compile project(':react-native-image-picker')
+		compile project(':aliyun-oss-react-native')
}

3.在android/app/src/main/java/…/MainApplication.java里增加代码

package com.myapp;

+ import com.imagepicker.ImagePickerPackage;
+ import com.reactlibrary.RNAliyunOssPackage;

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
+           new ImagePickerPackage()
+ 			new RNAliyunOssPackage()
        );
    }

}

RN页面代码:

import React,{ PureComponent } from 'react';
import { View, StyleSheet } from 'react-native';
import { ImagePicker } from 'antd-mobile';

const RNImagePicker = require('react-native-image-picker');


export default class Demo extends PureComponent {

  state = {
      files: [],
  };
    
  uploadImage = () => {
    const { files } = this.state;
    RNImagePicker.showImagePicker(options, response => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled photo picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        this.props.dispatch({
          type: 'demo/uploadOssFiles',
          payload: [{ ...response }],
          callback: (res = '') => {
            console.log(res, '@@@');
            this.setState({
              files: [...files, { ...response, url: response.uri }],
            });
          },
        });
      }
    });
  };

  render() {
    return (
      <View style={styles.scrollView}>
	   	  <ImagePicker 
	   	  	multiple 
	   	  	files={files} 
	   	  	onAddImageClick={this.uploadImage}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    height: '100%',
  },
});

modal层代码:

    // 图片上传
    *uploadOssFiles({ payload, callback }) {
      const proArr = payload.map(async subitem => {
      	//payload对象是array数组,首先需要遍历出来
        const fileUri = ossupload(subitem);
        return fileUri;
      });
      // 用Promise等待fileUri返回值
      const data = yield Promise.all(proArr, ret => ret);
      callback && callback(data);
    },

上传方法:

import moment from 'moment';
import AliyunOSS from 'aliyun-oss-react-native';

const endPoint = 'oss-cn-hangzhou.aliyuncs.com';
const configuration = {
  maxRetryCount: 3,
  timeoutIntervalForRequest: 30,
  timeoutIntervalForResource: 24 * 60 * 60,
};

const bucketname = 'myBucketname';
const urlCdn = 'https://myCDN.cn/';

//根据AliyunOss配置AccessKey
AliyunOSS.initWithPlainTextAccessKey('xxxxxx', 'xxxxxx', endPoint, configuration);

export const uploadOssFile = filepath => {
  const filetype = filepath.substring(filepath.lastIndexOf('.')).toLowerCase();
  //获取图片后缀

  const currm = moment(new Date());
  const oo = Math.random();
  const objectKey = `upload/assets/${currm.format('YYYYMM')}/${currm}${oo}${filetype}`;
  // 生成objectKey,作为自定义路径
  return AliyunOSS.asyncUpload(bucketname, objectKey, filepath)
    .then(() => {
      return `${urlCdn}${objectKey}`;
    })
    .catch(error => {
      console.log('=== error', error);
    });
};

AliyunOSS的具体配置请看这里

react-native-image-picker导入有问题的看这里

本文只记录一下个人的使用案例,不具有代表性 ?

没有更多推荐了,返回首页