2017-08-22 17:45:07 zww1984774346 阅读数 1033

最近新建React Native项目出现了这样的错误

这里写图片描述

编译总是报错,找到了解决方案,特此记录。

错误原因:
babel-preset-react-native version : @3.0.0 存在问题导致的

解决方案:

1、在package.json中添加“babel-preset-react-native”: “2.1.0”

"dependencies": {
  "react": "16.0.0-alpha.12",
  "react-native": "0.47.1",
  "babel-preset-react-native": "2.1.0"  --------->Here
},

2、安装插件,重启服务

$ npm install
$ npm start -- --reset-cache

或者执行以下命令后重启服务

命令1:

$ yarn remove babel-preset-react-native
$ yarn add babel-preset-react-native@2.1.0 

或者
命令2:

$ npm uninstall --save-dev babel-preset-react-native
$ npm install babel-preset-react-native@2.1.0

参考地址: https://github.com/facebook/react-native/issues/15513

2017-10-21 10:49:52 kangguang 阅读数 445

React Native 提供以下的常用API

Alert:跨平台的提示框

AppRegisty:注册React Native 应用的入口

AsyncStorage:React Native 提供的键-值存储系统。

Dimensions:用于获取设备的屏幕宽高

Platform:用于获取设备当前运行的平台名称

StyleSheet:提供了一种类似CSS样式表的抽象。

定时器:setInterval/clearInterval 创建和销毁定时器


一、屏幕设置相关API

 新建Screen.js文件

 1.获取屏幕宽高:Dimensions:

  


 



2 获取屏幕分辨率 PixeRatioo API

 


知识点:

  屏幕尺寸是指手机屏幕对角线的英寸数;屏幕分辨率是指屏幕宽高像素数;屏幕像素密度是指手机屏幕对角线上单位英寸内的像素数。

  屏幕分辨率 = 屏幕宽高 * 屏幕缩放比例

  常见设备的屏幕缩放比例为:

 

运行效果


二 动画 API

    RequestAnimationFrame:是个简单粗暴的动画API,通过不断改变state的值,来实现组件的动画效果

    LayoutAnimation:体验和性能更好,适用于全局的动画配置,实现单个动画非常简洁方便

    Animated: 最强大的动画API,适用于实现灵活丰富的动画效果,例如多个动画的组合动画。


  1.RequestAnimationFrame  API 帧动画

     创建Animation.js

   

   调用类

    

  运行效果

 

再次对 Animation.js修改

运行效果动画不明显而且显得生硬,实现不了“淡入淡出”和“弹性动画”

2.LayoutAnimation API布局动画

   当组件的布局变化时,会自动将组件运行到新的位置上。

    使用LayoutAnimation 的常用方法是 调用 .LayoutAnimation.configureNext,然后使用setState设置组件的属性

    configureNext函数用于配置动画效果:

      duration:动画时长

      create:组件创建时的动画

      updata:组件更新时的动画

      delete:组件销毁时的动画


     动画类型:

       spring: 弹跳

       linear:线性

       easeInEaseOut:缓入缓出

       easeIn:缓入

       easeOut:缓出

   opacity:透明度

   scaleXY:缩放

   对Animation.js修改

  

  运行后动画效果明显而且柔和。


 3.Animated API 动画

   Animated仅关注动画的输入与输出声明,在其中建立一个可配置的变化函数,然后使用简单的start()/stop()方法来控制动画按顺序执行。

   使用Animated 最简单的工作流程就是创建一个Animated.Value,将其绑定到组件的一个或多个样式属性上。然后可以通过动画驱动它,例如 Animated.timing,或通过Animated.event将其关联到一个手势上,例如拖动或者滑动操作。除了样式,Animated.value还可以绑定到props上。

    Animated 动画类型:

       spring:弹跳

       timing:渐变

       decay:以一个初始速度开始并且逐渐减慢停止

    Animated动画支持的组件有以下几种

       Animated.Text

       Animated.Image

       Animated.View

    3.1跳弹动画

        创建Animated.js文件

       

在其他文件中引用运行。

3.2 串行动画   

    创建AnimatedThrough.js

   

  

       在其他文件中引入运行

  

      


3.3 并行动画

    再做一次简单的修改

   

 动画简单的学习完毕,实际开发中还得看需求而定!


二、其他更加丰富的API

1.AlertIOS 提示框

2.Geolocation 定位

3.Keyboard

4 NetInfo 设备网络状态


2017-01-11 16:20:33 jyt199011302 阅读数 1186

一. 关于TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。

最简单的用法就是丢一个TextInput到应用里,然后订阅它的onChangeText事件来读取用户的输入。它还有一些其它的事件,譬如onSubmitEditing和onFocus。

二.TextInput常见的属性

因为TextInput继承自UIView,所以View的属性TextInput也能使用。

value 字符串型 文本输入的默认值
onChangeText 函数 监听用户输入的值, 此属性接受一个函数,而此函数会在文本变化时被调用。

keyboardType 键盘类型 决定打开哪种键盘,例如数字键盘等
password 布尔型 如果值为真,文本输入框就形成一个密码区域。默认值为假。
onSubmitEditing 会在文本被提交后(用户按下软键盘上的提交键)调用。
multiline 布尔型 如果值为真,文本输入可以输入多行。默认值为假。
placeholder 字符串型
placeholderColer 字符串型
onBlur 当文本输入时模糊的,调用回调函数
onEndRditing
onFocus 当输入的文本是聚焦状态时,调用回调函数
secureTextEntry 布尔型 如果值为真,文本输入框就会使输入的文本变得模糊,以便于像密码这样的敏感文本保持安全。默认值为假。
onBlur 当文本输入时模糊的,调用函数

示例 :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';
export default class TextInputDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
            style={styles.inputStyle}
            // value={'我是默认文字'}
            keyboardType={'number-pad'}
            // 多行显示
            // multiline={true}
            // password={true}
            placeholder={'我是占位文字'}
            clearButtonMode={'always'}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },

    inputStyle:{
        marginTop:30,
        width:300,
        height:60,
        // 背景
        // backgroundColor:'black',
        // 边框
        borderWidth:1,
        borderColor:'#e8e8e8'
    }
});

AppRegistry.registerComponent('TextInputDemo', () => TextInputDemo);
2017-10-19 22:43:17 kangguang 阅读数 977

复用学习移植项目的项目(此时版本0.49)

这时候 import CustomerComponents, {Navigator} from 'react-native-deprecated-custom-components';已经失效,运行报错

此时对项目进行更改


NavigatorIOS, 学习参考http://www.jianshu.com/p/4c81995746ea


二、增加TabBar

  1.创建more.js

  


2.修改 app.js




三、运行项目


四。访问原生API

1.新建Platform.js

2.修改more.js

 

3.XCode 上创建 Platform文件

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface Platform : NSObject<RCTBridgeModule>

@end

#import "Platform.h"

@implementation Platform
RCT_EXPORT_MODULE();
-(NSDictionary *)constantsToExport
{
  return @{@"systemName":@"ios"};
}
@end


5.运行


更多学习 http://www.cnblogs.com/shaoting/p/6392390.html

源码地址:https://github.com/kangxg/React-Native-    RNTransplant目录

2016-08-30 12:14:44 qizhenshuai 阅读数 2312

React Native获取移动设备信息(react-native-device-info)如何使用?

  • 组件说明
  • 组件使用介绍
  • ios如何使用
  • android如何使用

组件说明

  • 该组件是一个第三方的获取移动设备信息的一个组件,适用于ios和android双平台

组件使用介绍

在ReactNative中使用第三方组件,都必须要下载依赖包
我们一般都是使用命令行来执行下载:
进入项目执行:npm install –save react-native-device-info

ios 使用react-native-device-info

  • 1.首先要在xcode中进行初始化
    打开xcode,找到自己的项目,展开后右击Libraries文件夹。
    选择Add Files to “projectName”…
    找到当前项目目录–>node_modules/react-native-device-info文件夹,找到”RNDeviceInfo.xcodeproj”文件,然后点击Add
  • 2.在xcode中加载
    在Xcode中点击你的工程名字——>Build Phases——>Link Binary With Libraries——>点击 ‘+’号按钮,添加libRNDeviceInfo.a文件
  • 3.添加环境变量
    (SRCROOT)/../reactnative/Reactand(SRCROOT)/../../React 并且修改 recursive
  • 4.基本的用法
    ***import DeviceInfo from ‘react-native-device-info’
    console.log(“Device Unique ID”, DeviceInfo.getUniqueID()); // e.g. FCDBD8EF-62FC-4ECB-B2F5-92C9E79AC7F9
    // * note this is IDFV on iOS so it will change if all apps from the current apps vendor have been previously uninstalled
    console.log(“Device Manufacturer”, DeviceInfo.getManufacturer()); // e.g. Apple
    console.log(“Device Model”, DeviceInfo.getModel()); // e.g. iPhone 6
    console.log(“Device ID”, DeviceInfo.getDeviceId()); // e.g. iPhone7,2 / or the board on Android e.g. goldfish
    console.log(“Device Name”, DeviceInfo.getSystemName()); // e.g. iPhone OS
    console.log(“Device Version”, DeviceInfo.getSystemVersion()); // e.g. 9.0
    console.log(“Bundle Id”, DeviceInfo.getBundleId()); // e.g. com.learnium.mobile
    console.log(“Build Number”, DeviceInfo.getBuildNumber()); // e.g. 89
    console.log(“App Version”, DeviceInfo.getVersion()); // e.g. 1.1.0
    console.log(“App Version (Readable)”, DeviceInfo.getReadableVersion()); // e.g. 1.1.0.89
    console.log(“Device Name”, DeviceInfo.getDeviceName()); // e.g. Becca’s iPhone 6
    console.log(“User Agent”, DeviceInfo.getUserAgent()); // e.g. Dalvik/2.1.0 (Linux; U; Android 5.1; Google Nexus 4 - 5.1.0 - API 22 - 768x1280 Build/LMY47D)
    console.log(“Device Locale”, DeviceInfo.getDeviceLocale()); // e.g en-US
    console.log(“Device Country”, DeviceInfo.getDeviceCountry()); // e.g US

android 使用react-native-device-info

  • 1.首先需要修改下Gradle文件
    在你的根目录下运行:react-native link react-native-device-info
  • 2.在MainActivity.java文件中进行注册模块(react-native的版本需要>0.18)

    *
    import com.learnium.RNDeviceInfo.RNDeviceInfo; // <— import


public class MainActivity extends ReactActivity {
……
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List getPackages() {
return Arrays.asList(
new RNDeviceInfo(), // <—— add here
new MainReactPackage());
}
}
  • 3.如果你需要在安卓上获取设备的名字,需要修改AndroidManifest.xml配置文件,来获取权限。

在android设备中获取以下权限:
uses-permission android:name=”android.permission.BLUETOOTH”



  • 4.android中用法

***import DeviceInfo from ‘react-native-device-info’
console.log(“Device Unique ID”, DeviceInfo.getUniqueID()); // e.g. FCDBD8EF-62FC-4ECB-B2F5-92C9E79AC7F9
// * note this is IDFV on iOS so it will change if all apps from the current apps vendor have been previously uninstalled
console.log(“Device Manufacturer”, DeviceInfo.getManufacturer()); // e.g. Apple
console.log(“Device Model”, DeviceInfo.getModel()); // e.g. iPhone 6
console.log(“Device ID”, DeviceInfo.getDeviceId()); // e.g. iPhone7,2 / or the board on Android e.g. goldfish
console.log(“Device Name”, DeviceInfo.getSystemName()); // e.g. iPhone OS
console.log(“Device Version”, DeviceInfo.getSystemVersion()); // e.g. 9.0
console.log(“Bundle Id”, DeviceInfo.getBundleId()); // e.g. com.learnium.mobile
console.log(“Build Number”, DeviceInfo.getBuildNumber()); // e.g. 89
console.log(“App Version”, DeviceInfo.getVersion()); // e.g. 1.1.0
console.log(“App Version (Readable)”, DeviceInfo.getReadableVersion()); // e.g. 1.1.0.89
console.log(“Device Name”, DeviceInfo.getDeviceName()); // e.g. Becca’s iPhone 6
console.log(“User Agent”, DeviceInfo.getUserAgent()); // e.g. Dalvik/2.1.0 (Linux; U; Android 5.1; Google Nexus 4 - 5.1.0 - API 22 - 768x1280 Build/LMY47D)
console.log(“Device Locale”, DeviceInfo.getDeviceLocale()); // e.g en-US
console.log(“Device Country”, DeviceInfo.getDeviceCountry()); // e.g US


React Native 注释问题

阅读数 2999

java native方法使用

阅读数 2758

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