emit数据 native react
2017-08-08 15:18:05 jiangfei009003 阅读数 797
**
 Sample React Native App

 *  https://github.com/facebook/react-native

 *  @flow
 */


"use strict"

import React, {Component} from 'react'
import {
    AppRegistry,
    View,
    Text,
    Picker,
    StyleSheet
} from 'react-native'

var FirstData = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6'
]
var SecondData = [
    '11',
    '22',
    '33',
    '44',
    '55',
    '66'
]
var ThirdData = [
    '111',
    '222',
    '333',
    '444',
    '555',
    '666'
]

// 读取本地json文件(城市选择器,后续更新)
let jsonData = require('./area.json')

class HelloWorld extends Component {

    constructor(props) {
        super(props)

        this.state={

            firstValue:  FirstData[0],
            secondValue: SecondData[0],
            thirdValue:  ThirdData[0],

        }
    }


    updateFirstValue(language) {

        this.setState({
            firstValue: language,

        })
    }
    updateSecondValue(language) {

        this.setState({
            secondValue: language,

        })
    }
    updateThirdValue(language) {

        this.setState({
            thirdValue: language,

        })
    }


    renderPicker(key, i) {

        console.log(key, i)

        return <Picker.Item key={i} label={key} value={key} />
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>{this.state.firstValue+this.state.secondValue+this.state.thirdValue}</Text>
                <View style={styles.pickerViewContainer}>
                    <Picker style={styles.pickerStyle}
                            selectedValue={this.state.firstValue}
                            onValueChange={(language) => this.updateFirstValue(language)}>
                        {FirstData.map((key, i) => this.renderPicker(key, i))}
                    </Picker>
                    <Picker style={styles.pickerStyle}
                            selectedValue={this.state.secondValue}
                            onValueChange={(language) => this.updateSecondValue(language)}>
                        {SecondData.map((key, i) => this.renderPicker(key, i))}
                    </Picker>
                    <Picker style={styles.pickerStyle}
                            selectedValue={this.state.thirdValue}
                            onValueChange={(language) => this.updateThirdValue(language)}>
                        {ThirdData.map((key, i) => this.renderPicker(key, i))}
                    </Picker>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
        backgroundColor: '#F5FCFF'
    },
    text: {
        width: 200,
        height: 60,
        marginTop: 100,
        backgroundColor: 'white',
        justifyContent:'center',
        alignItems: 'center',
        borderRadius: 5,
    },
    pickerViewContainer: {
        flex: 1,
        flexDirection: 'row',
        paddingTop: 30

    },
    pickerStyle: {
        flex: 1,
    }
})


AppRegistry.registerComponent('HelloWorld', () => HelloWorld);


******************************  知识点  ******************************
1.实现多列:把 3 个picker放在同一个View上;
2.排列方式为: row ;
3.flex设置为: 1(各占三分之一并充满父组件);

******************************  效果图  ******************************

 



2017-10-10 15:43:00 weixin_34021089 阅读数 24

本地数据存储指的是将数据存储在设备中,在需要数据的时候调用,数据并不会因为应用退出,或者网络断开而无法获取。在React Native中常用的存储方式有两种:

  • AsyncStorage:类似iOS中的NSUserDefault,存放在plist文件中,官方推荐由React Native中文网封装维护的react-native-storage模块
  • Realm: 新的移动端数据库王者,据说性能甚至比单独无封装的SQLite还要快
    如果你的应用数据量不大,仅仅需要存储几个用户配置的信息,就用AsyncStorage,否则就用Realm,如何抉择就像你选择NSUserDefault还是SQLite一样

下面举例用到的两个场景
场景1:用户通过用户名和密码登录,返回token,后续的接口请求中,需在请求头部带上token,服务端根据token来识别用户。

一 、安装react-native-storage并全局范围内创建一个storage实例
npm install react-native-storage --save
import { AsyncStorage } from 'react-native';
import Storage from 'react-native-storage';
var storage = new Storage({
    size: 1000,
    storageBackend: AsyncStorage,
    defaultExpires: null,
    enableCache: true,
})
// 全局变量
global.storage = storage
二 、用户登录,存储Token
    fetch_login = () => {
        let params = {
            account: this.username,
            password: this.password,
            client_secret: config.app_client_secret,
            client_id: config.app_client_id
        }
        passport_fetch('users/signin', 'POST', params).then(
            (data) => {
                //存储用户Token
                global.storage.save({
                    key:'token',
                    data: data.access_token,
                    expires: null
                });
                this.refs.toast.show('登录成功');
                this.fetchUserInfo()
            }
        ).catch(
            err=>{
                this.refs.toast.show(err);
            }
        )
    }
三 、接口请求时获取存储的Token信息

passport_fetch 是与帐号相关的网络请求接口,调用时候会从storage获取存储的Token并放入请求头部

const passport_fetch = async (url, method, params = '') => {
    //获取存储Token
    let token= await global.storage.load({
        key:'token'
    })
    let header = {
        "Content-Type": "application/json;charset=UTF-8",
        'platform': 2,
    };
    if (token.length) {
        header['Authorization'] = 'Bearer ' + token
    }
    return new Promise(function (resolve, reject) {
        fetch(common_url + url, {
            method: method,
            headers: header,
            body:JSON.stringify(params)   
        }).then((response) => response.json())
            .then(checkStatus)
            .then((responseData) => {
                resolve(responseData['data']);
            })
            .catch( (err) => {
                console.log('err:',url, err);  
                reject(err);
            });
    });
}

这里需注意的是存储数据的获取,storageload是异步的,正常header以及请求只能写在其then方法中,才能保证请求是在获取到数据之后才进行,如果要保证同步的写法,这里可以采用await伪同步的方式,同时整个函数必须是async的,最后返回一个Promise,比如登录后获取用户信息则会自动带上Token数据

    fetchUserInfo = () => {
        passport_fetch('users/me', 'GET').then(
            () => {
                this.refs.toast.show('获取信息成功');
            }
        ).catch(
            err=>{
                this.refs.toast.show(err);
            }
        )
    }

场景2:app首页加载时候先显示上次请求的数据,避免接口数据请求未返回前页面无数据的尴尬情况

在首页js文件中添加如下代码:
constructor(props) {
     super(props)
      this.state = {
          dataList: this.loadFromLocal(),
       }
       ...
}
//加载缓存数据
loadFromLocal = async () => {
    let list= await storage.load({
        key:'recommendList'
    })
    this.setState({
        dataList: list,
    })
}
fetchRequest('games/recommend', 'GET').then(
    data => {
        let newList = data.map((item) => {
            return {
                imageUrl: item.icon_url,
                ...
            }
        })
        for (let i = 0; i < newList.length; i++) {
            newList[i].id = i
        }
        this.setState({
            dataList: newList,
            refreshState: RefreshState.Idle,
        })
        storage.save({
            key:'recommendList',
            data: newList,
            expires: null
        })
    }
)

参考

理解 JavaScript 的 async/await
async/await的基础用法

2019-04-04 14:14:27 ahou2468 阅读数 94

1.整型转为十六进制,八进制,二进制

let index = 15;
index.toString(16)    //十六进制    f
index.toString(8)     //转为八进制    17
index.toString(2)     //二进制    1111

2.十六进制,八进制,二进制转为整型值

let value = '11';
parseInt(value, 16)    //十六进制转为整数    17
parseInt(value, 8)     //八六进制转为整数    9
parseInt(value, 2)     //二六进制转为整数    3

3.字符串转16进制

function strToHexCharCode(str) {
  if(str === "")
    return "";
  var hexCharCode = [];
  hexCharCode.push("0x"); 
  for(var i = 0; i < str.length; i++) {
    hexCharCode.push((str.charCodeAt(i)).toString(16));
  }
  return hexCharCode.join("");
}

4.16进制转字符串

function hexCharCodeToStr(hexCharCodeStr) {
  var trimedStr = hexCharCodeStr.trim();
  var rawStr = 
  trimedStr.substr(0,2).toLowerCase() === "0x"
  ? 
  trimedStr.substr(2) 
  : 
  trimedStr;
  var len = rawStr.length;
  if(len % 2 !== 0) {
    alert("Illegal Format ASCII Code!");
    return "";
  }
  var curCharCode;
  var resultStr = [];
  for(var i = 0; i < len;i = i + 2) {
    curCharCode = parseInt(rawStr.substr(i, 2), 16); // ASCII Code Value
    resultStr.push(String.fromCharCode(curCharCode));
  }
  return resultStr.join("");
}

5.字符转ASCII

大写字母A-Z对应的ASCII码值是65-90 
小写字母a-z对应的ASCII码值是97-122
var str = "A";
str.charCodeAt();  // 65

var str1 = 'a';
str1.charCodeAt();  // 97

6.将ascii码转为对应字母

大写字母A-Z对应的ASCII码值是65-90 
小写字母a-z对应的ASCII码值是97-122
var num = 97;
String.fromCharCode(num);  // 'a'

var num1 = 100;
String.fromCharCode(num1);  // 'd'

参考:

http://www.w3school.com.cn/jsref/jsref_parseInt.asp?utm_source=caibaojian.com

http://caibaojian.com/js-typeconversion.html

https://www.cnblogs.com/cutone/p/6007031.html

https://blog.csdn.net/xiaobing_hope/article/details/78645273

2017-05-31 18:05:27 SpicyBoiledFish 阅读数 6419

第一步:

引入RCTDeviceEventEmitter:

//两种方法:import为ES6语法:
import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter'

// var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');

第二步:

发送通知:

RCTDeviceEventEmitter.emit('通知名称',value); 

接收通知:

componentDidMount(){  
  this.listener = RCTDeviceEventEmitter.addListener('通知名称',(value)=>{  
    // 接受到通知后的处理  
  });  
}  
  
componentWillUnmount(){  
  // 移除 一定要写  
  this.listener.remove();  
}  

什么时候使用?

用户在某个页面登录成功后,发送一个通知给全局,这样在主页面监听登录状态,如果已经登录,那么就用AsyncStorage.setItem将用户的信息设置到缓存中。这里的AsyncStorage就是相当于HTML5中的localStorage,他是永久存储在缓存中的,除非手动clear。有大约20MB的缓存空间。而cookie是在设置的缓存有效期之前是有效的,只有4KB的存储空间;而sessionStorage是会话型的,只要浏览器窗口关闭,缓存就会被清除,有5MB的缓存空间。

2018-03-02 15:23:00 weixin_34391445 阅读数 67

Illegal callback invocation from native module. This callback type only permits a single invocation from native code.

因为最近在做TCP和UDP相关的App,虽然网上有react-native-smartconfig, react-native-udpreact-native-tcp,但是我用起来感觉非常不好用,于是就自己写React Native相关的模块,并且调试也方便,同时也避免了第三方库所带来的坑。

但是我想多次回调数据时却发现每次控制台都会出现以下错误,不管我使用PromisesCallback都是如此

Illegal callback invocation from native module. This callback type only permits a single invocation from native code.

于是我Google,Baidu并且Stackoverflow也查找了,最终发现是关于内存的原因https://github.com/facebook/react-native/issues/6300

因为React Native为了节省内存,当调用Promises或者Callback一次之后,React Native就立即释放掉了,所以他仅仅只能调用一次. 但是我们有其他需求的时候,比如蓝牙扫描, 做过蓝牙方面应用的应该都知道,当用户扫描设备时,并不是一次性的将周围蓝牙设备返回,因此这个时候我们就需要多次回调数据。

Sending Events to JavaScript

因此React Native中还有一个RCTEventEmitter类:

The native module can signal events to JavaScript without being invoked directly. The preferred way to do this is to subclass RCTEventEmitter, implement supportedEvents and call self sendEventWithName:

Native Module出现多次数据回调时,我们可以使用RCTEventEmitter来注册事件,然后通知到JavaScript

Java中使用的方法

    /**
    *
    * @param eventName 事件的名称
    * @param obj 对应的Value
    */
    public void sendEventToJs(String eventName,Object obj){
        getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,obj);
    }

Object-C的实现方法(Object-C中步骤较多)

(1). 在自定义模块.h文件中导入#import <React/RCTEventEmitter.h>,同时NSObject<RCTBridgeModule>替换为RCTEventEmitter<RCTBridgeModule>,最终.h代码如下

#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import <Foundation/Foundation.h>
#import <React/RCTEventEmitter.h>

@interface ReactNativeLoading : RCTEventEmitter<RCTBridgeModule>

@end

(2). 在自定义模块的.m文件中return支持的事件名称,然后就可以再想使用的方法中调用sendEventWithName来发送事件和对应的value,最终.m代码如下:(例子中的方法名称为loading)

#import "ReactNativeLoading.h"

@implementation ReactNativeLoading
  RCT_EXPORT_MODULE();

- (NSArray<NSString *> *)supportedEvents
{
  return @[@"EventReminder"];
}

RCT_EXPORT_METHOD(loading){
  
  [self sendEventWithName:@"EventReminder" body:@{@"name":@11}];
}
  
@end

Swift的实现方法

目前还没用过React Native + Swift,如果有需要的可以帮助研究,毕竟我学IOS也是从Swift开始的

React Native实现方法

import { NativeEventEmitter, NativeModules } from 'react-native';
const { ReactNativeLoading } = NativeModules;

const loadingManagerEmitter = new NativeEventEmitter(ReactNativeLoading);
const subscription = loadingManagerEmitter.addListener('EventReminder',(reminder) => {
    console.log(reminder)
});

/** 
 * Don't forget to unsubscribe, typically in componentWillUnmount
 * 当我们不使用了或者退出当前界面时,我们需要移除监听
 */
componentWillUnmount(){
    subscription.remove();
}

上面就是全部的使用经过,如果有不同意见或者问题欢迎追问

关于原生模块的更多信息:
(1). Android Native Modules: https://facebook.github.io/react-native/docs/native-modules-android.html
(2). IOS Native Modules: https://facebook.github.io/react-native/docs/native-modules-ios.html

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