2019-10-29 17:23:29 museions 阅读数 68
  • 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标签组件的封装。

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

react-native使用第三方库以及引入react-native-elements
1.首先需要下载依赖包到本地


cd /project
yarn add react-native-elements
# or with npm
npm install react-native-elements

2.引入react-native-elements到项目的component

User.js

以头像组件为例:

import { Avatar } from 'react-native-elements';

// Standard Avatar
<Avatar
  rounded
  source={{
    uri:
      'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
  }}
/>

// Avatar with Title
<Avatar rounded title="MD" />

// Avatar with Icon
<Avatar rounded icon={{ name: 'home' }} />

// Standard Avatar with edit button
<Avatar
  source={{
    uri:
      'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
  }}
  showEditButton
/>


做了一次搬运工,原始地址在这里:
https://react-native-elements.github.io/react-native-elements/docs/avatar.html

笔者用过这个做过一个完整的项目,相关的组件挺好用。提醒一下:不要过多依赖UI库,用react native + ES6实践,自己封装组件才能提高对框架的熟练度。

 

2019-12-01 20:56:49 weixin_43762903 阅读数 46
  • 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标签组件的封装。

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

将react-native>0.6.0的情况单独列出来,是因为当react-native版本小于0.6时,组件需要手动连接,官网已经给出了引入步骤。

按照官网引入时会出现许多报错,此时可以参考我的另一篇博客https://blog.csdn.net/weixin_43762903/article/details/103335305

但是,当react-native版本大于0.6.0时,组件为自动连接。按理说引入应该更加简单,但致命的是官网并没有给出当react-native>0.6.0时的引入方法。导致初用者摸不到头脑,不知道哪一步应该做,哪一步不需要做。

在此将react-native>0.6.0时的引入方法记录如下:

①下载:(npm、yarn或者其它方式均可)

npm i react-native-splash-screen --save 或者 yarn add react-native-splash-screen

②在MainActivity.java中添加:

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this,true);  // here
    super.onCreate(savedInstanceState);
}

在这里插入图片描述
③在MainApplication.java中添加:

import org.devio.rn.splashscreen.SplashScreenReactPackage;

在这里插入图片描述
④添加drawable-xhdpi与drawable-xxhdpi文件夹

查看android\app\src\main\res目录下是否存在drawable-xhdpidrawable-xxhdpi文件夹。如不存在,则自行建立。两个文件夹中的图片即为不同尺寸屏幕下对应的启动屏图片。
在这里插入图片描述
(drawable-xhdpi文件夹下的图片大小为750×1334;drawable-xxhdpi文件夹下的图片大小为1242×2208)

⑤添加layout文件夹及launch_screen.xml文件

具体文件内容与添加位置如下图所示:

在这里插入图片描述
⑥使用

基于以上配置,启动屏已经可以显示,但仍无法消失。需要引入以下内容:

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
    	 // do anything while splash screen keeps, use await to wait for an async task.
        SplashScreen.hide();//关闭启动屏幕
    }
}

至此,react-native-splash-screen组件引入完毕,可以正常使用。

2017-05-01 11:16:17 qq_31136727 阅读数 3138
  • 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标签组件的封装。

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

在使用react-native 制作毕设的过程中,需要用到手机相册,发现react-native- images -crop-picker 组件不错。

1、安装

npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker

2、 使用

引入 :import ImagePicker from 'react-native-image-crop-picker';
从相册中选择单张图片:
ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});
从相册中选择多张图片:
ImagePicker.openPicker({
  multiple: true
}).then(images => {
  console.log(images);
});
拍照:
ImagePicker.openPicker({
  multiple: true
}).then(images => {
  console.log(images);
});
返回的资源对象(images):
path(string):图片地址
data(base64):图片base64格式数据流
mime(string):图片格式
width(number):图片宽度
height(number):图片高度
size(number):图片大小

3、使用前需要注意的
在xcode中将项目打开,找到Embedded Binaries, 点击+,添加

RSKImageCropper.framework
QBImagePicker.framework

另外,需要在info.plist文件中,添加键值对,允许访问相册和相机

访问相机:NSCameraUsageDescription   
访问相册:NSPhotoLibraryUsageDescription

附其他参数:

<key>NSCameraUsageDescription</key>
<string>App需要您的同意,才能访问相机</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>App需要您的同意,才能访问相册</string>

<key>NSContactsUsageDescription</key>
<string>App需要您的同意,才能访问通讯录</string>

<key>NSLocationAlwaysUsageDescription</key>
<string>App需要您的同意,才能始终访问位置</string>

<key>NSLocationUsageDescription</key>
<string>App需要您的同意,才能访问位置</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>App需要您的同意,才能在使用期间访问位置</string>

<key>NSMicrophoneUsageDescription</key>
<string>App需要您的同意,才能访问麦克风</string>

<key>NSBluetoothPeripheralUsageDescription</key>
<string>App需要您的同意,才能访问蓝牙</string>

<key>NSCalendarsUsageDescription</key>
<string>App需要您的同意,才能访问日历</string>

<key>NSAppleMusicUsageDescription</key>
<string>App需要您的同意,才能访问媒体资料库</string>

<key>NSHealthShareUsageDescription</key>
<string>App需要您的同意,才能访问健康分享</string>

<key>NSHealthUpdateUsageDescription</key>
<string>App需要您的同意,才能访问健康更新</string>

<key>NSMotionUsageDescription</key>
<string>App需要您的同意,才能访问运动与健身</string>

<key>NSRemindersUsageDescription</key>
<string>App需要您的同意,才能访问提醒事项</string>

以上为ios配置,详细配置以及android的配置可以参照github上的react-native- images -crop-picker官方项目介绍

其他相册选择第三方库:
react-native-camera-roll-picker
react-native-image-picker

2019-01-16 15:53:33 qq_28683541 阅读数 298
  • 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标签组件的封装。

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

iconfont(阿里巴巴矢量图标库)

1.使用命令行工具进行 react-native-vector-icons 工具的安装:

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

安装完成之后在package.json文件中可以看到新增了一行

"react-native-vector-icons": "^5.0.0",

2.使用命令

react-native link react-native-vector-icons

或者

npm install -g rnpm
rnpm link react-native-vector-icons

进行自动关联

3.在 index.js 文件中引入

import Icon from "react-native-vector-icons/Ionicons"

4.将下载好的icon fonts 文件 放置到 app/src/main/assets/fonts 文件夹中 如图所示:

 

使用自定义的 iconfont

1、将需要的图标添加入库,然后下载代码即可:

2、点击下载至本地并解压缩,里面包含所有的字体文件。找到 iconfont.ttf,这是需要的文件

3、要使用刚才我们下载的图标,就需要知道在 iconfont.ttf 里面的图标字符码,虽然我们可以直接在阿里巴巴矢量图标库看到具体的字符码,这里需要忽略前面的 &#x ,主要的字符代码就是 e6a0 ;将它转为十进制的 59040 就是我们需要的 json 文件中的字符串映射。

4、这里数量还算少了,如果有上百个,我们一个一个来手动换算岂不是累死?这里推荐一个 Python 的工具库(Mac自带Python)。

由于 React Native 的开发环境就要求安装 Python ,这里就不说怎么安装了,只需要配置好 Python 的环境变量:

5、通过命令行安装 fonttools

pip install fonttools

6、然后在 Github 上面克隆react-native-iconfont-mapper到本地并将刚才的 .ttf 文件放在项目根目录中即可:

7、执行: python iconfont-mapper.py iconfont.ttf iconfont.js

  这样子就会生成一个 iconfont.js 文件,里面我们需要的图标映射的字符串:

var map = {"favorite":"59040","cart":"59032","back":"59031","x":"120","close":"59034","delete":"59037","edit":"59038",};
;module.exports = (name)=>String.fromCharCode(map[name]);
;module.exports.map = map;

8、然后我们就可以模仿着源码来使用了,打开“node_modules/react-native-vector-icons/Ionicons" 

import createIconSet from ‘./lib/create-icon-set‘;
import glyphMap from ‘./glyphmaps/Ionicons.json‘;

const iconSet = createIconSet(glyphMap, ‘Ionicons‘, ‘Ionicons.ttf‘);

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

9、可以看到核心代码就前面 3 行,那就简单了,做点简单的修改即可:

import {createIconSet} from "react-native-vector-icons"

const glyphMap = {
    favorite: 59040,
    cart: 59032,
    back: 59031,
    x: 120,
    close: 59034,
    delete: 59037,
    edit: 59038,
};

const myIcons = createIconSet(glyphMap, ‘iconfont‘, ‘iconfont.ttf‘);

export default myIcons;

10、回到一开始运行的 App.js ,导入这个新的 iconfont 文件:

import MyIcons from "./MyIcons";

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MyIcons name="favorite" size={15} color="red" />
        <MyIcons name="cart" size={25} color="yellow" />
        <MyIcons name="x" size={35} color="black" />
        <MyIcons name="edit" size={45} color="gray" />
      </View>
    );
  }
}

11、最后一步:配置iconfont.ttf

  IOS: 把iconfont.ttf拖入Xcode,然后跟项目关联

  Android:  把iconfont.ttf 放在 \android\app\src\main\assets\fonts

2018-11-30 22:30:28 qq_25134721 阅读数 212
  • 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标签组件的封装。

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

安装

npm install react-native-swiper --save

引入

import React,{Component} from 'react';
import { View,Text,StyleSheet,Alert } from 'react-native';
import Swiper from 'react-native-swiper';

render中:

<Swiper style={styles.wrapper}
     showsButtons={true}
     autoplay={true}
     autoplayTimeout={2.5}
     horizontal={true}
     loop={true}
     index={0}
     dot={<View style={{           //未选中的圆点样式
         backgroundColor: 'rgba(0,0,0,.2)',
         width: 10,
         height: 10,
         borderRadius: 5,
         marginLeft: 10,
         marginRight: 9,
         marginTop: 9,
         marginBottom: 9,
     }}/>}
     activeDot={<View style={{    //选中的圆点样式
         backgroundColor: '#f00',
         width: 10,
         height: 10,
         borderRadius: 5,
         marginLeft: 10,
         marginRight: 9,
         marginTop: 9,
         marginBottom: 9,
     }}/>}
     paginationStyle={{
         position:'absolute',
         top:0,
         left:0
     }}
     nextButton={<Text></Text>}
     prevButton={<Text></Text>}
     buttonWrapperStyle={{
         backgroundColor:'#transparent',
         flexDirection: 'row',
         position: 'absolute',
         top: 0,
         left: 0,
         flex: 1,
         paddingHorizontal: 10,
         paddingVertical: 10,
         justifyContent: 'space-between',
         alignItems: 'center'
     }}
     onIndexChanged={this.onIndexChange.bind(this)}>
 <View style={styles.slide1} onPress={this.clickHandler.bind(this)}>
     <Text style={styles.text}>Hello Swiper</Text>
 </View>
 <View style={styles.slide2}>
     <Text style={styles.text}>Beautiful</Text>
 </View>
 <View style={styles.slide3}>
     <Text style={styles.text}>And simple</Text>
 </View>
</Swiper>

style

const styles = StyleSheet.create({
    wrapper: {
        flexGrow:1
    },
    slide1: {
        // flex: 1,
        height:300,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        // flex: 1,
        height:300,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        // flex: 1,
        height:300,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    }
})
没有更多推荐了,返回首页