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即可。
 

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 的问题。

2019-02-22 15:20:59 qq934235475 阅读数 1167
  • 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-spinkit ,感觉使用起来很不错,记录一下使用的过程。

效果展示: 

 

其他动画效果:

那么,让我们提起裤子开干吧! 


环境版本:

  "react": "^16.2.0",
  "react-native": "^0.53.0",
  "react-native-spinkit": "^1.1.1",

总体步骤:

  1. 导入组件。
  2. iOS 与 Android 原生进行配置。
  3. 开始使用。

一,导入组件

npm install react-native-spinkit --save

注:0.60 以上版本自动 linking (iOS 如果提示找不到,请 cd iOS && pod install)


二,原生配置

Android:https://github.com/maxs15/react-native-spinkit/wiki/Manual-linking

iOS:https://github.com/maxs15/react-native-spinkit/wiki/Manual-linking

参考如上教程即可,有不懂可以提问。


三,使用

我这里考虑到复用性,封装成了一个组件,通过前一页面传入大小,颜色与动画类型,来进行展示,代码如下:

import Spinkiter from 'react-native-spinkit';
import {Modal,View} from 'react-native';
import React, {Component} from 'react';
/**
 *
 * List of available spinkerType
 * CircleFlip
 * Bounce
 * Wave
 * WanderingCubes
 * Pulse
 * ChasingDots
 * ThreeBounce
 * Circle
 * 9CubeGrid
 * WordPress (IOS only)
 * FadingCircle
 * FadingCircleAlt
 * Arc (IOS only)
 * ArcAlt (IOS only)

 */
export default class Spinner extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Modal
               visible={this.props.showSpinner}
               transparent={true}>
                <View
                    style={{
                        flex: 1,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: 'rgba(0, 0, 0, 0.6)'
                    }}>
                    <Spinkiter isVisible={this.props.showSpinner} size={this.props.spinkerSize} type={this.props.spinkerType} color={this.props.spinkerColor}/>
                </View>
            </Modal>
        );
    }
}

项目示例:https://github.com/supervons/commonProject

欢迎关注,star!

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-03-18 23:06:32 u010047432 阅读数 1848
  • 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 人正在学习 去看看 钱兴岗

先开门见山说下这个问题在哪里,这个问题应该是出在yarn包管理工具上。
首先报上RN的依赖版本配置:
在这里插入图片描述
这几天在初始化项目并通过yarn add react-navigationyarn add react-native-gesture-handler加载导航依赖包时,步骤一切正常,但当执行react-native link react-native-gesture-handler进行原生依赖时,深深的惊喜出现了:
运行react-native link react-native-gesture-handler报错
纳尼?这是什么神报错???尽管在网上搜了不下上百篇文章,也试了各种办法,亦然不行,几近绝望啊,最后分析可能是yarn工具有问题,于是不用yarn而用npm进行包的加载,在执行:npm install react-native-gesture-handler@latest --save (即通过npm方式加载包)再重新link:react-native link react-native-gesture-handler
在这里插入图片描述
除了上边的这个报错,还有中情况是下边的报错:error Failed to get dependency config
error Failed to get dependency config
解决办法依然是:npm install react-native-gesture-handler@latest --save进行对react-native-gesture-handler的更新,如下:
在这里插入图片描述
最后说下,由于这里改用npm进行包依赖的加载,所以可能在Android studio会报错,也就是路径有点问题,把路径中的 \ 改成 / 然后保存即可:
在这里插入图片描述
RN的坑真是多啊。。。。-_-!!

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