ReactNative学习一

ReactNative

 

主要学习来源于RN官方文档https://reactnative.cn/docs/0.51/getting-started.html

不过除了这个RN官方文档，其他RN中文教程都很落伍，基本上都是16年左右的。所以建议大家有问题多去google外网有很多问题的解决办法。

当时学习时使用的windows。

学习成果：大致模仿出了一个App的基本框架及示例demo。

整个学习分为以下几个部分：

1、学习各个基础组件的使用方式和方法属性。需要主要关注的组件即

文字、text

文本输入、input组件

滚动视图、

图片组件

2、学会以上四个基础组件便可以组建出一些简单的视图页面。

除此之外需要学习一些基本的规范要求：例如，计时器，颜色，动画等的书写，并尝试将这些结合起来书写demo。

3、学习navigation的书写及属性及方法。navigation主要有三种：stackNavigator,drawerNavigator和tabNavigator三种各有各的书写方法，有特有的方法及属性。这个需要重点学习。navigator有官方网站https://reactnavigation.org/docs/en/hello-react-navigation.html。

4、学习Storage 本地存储。

var storage = new Storage({

ize: 1000,

// 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage

// 如果不指定则数据只会保存在内存中，重启后即丢失

storageBackend: AsyncStorage,

// 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期

defaultExpires: 1000 * 3600 * 24,

// 读写时在内存中缓存数据。默认启用。

enableCache: true,

// 如果storage中没有相应数据，或数据已过期，

// 则会调用相应的sync方法，无缝返回最新数据。

})

global.storage = storage;

5、web与RN页面通信（web放在android/app/src/main/assets中)

<WebView

style={{ width: screenWidth }}

source={{ uri:'file:///android_asset/index.html'}}

javaScriptEnabled={true}

scalesPageToFit={true}

startInLoadingState={true}

onMessage={this.showdata.bind(this)}

ref='webview'

/>

Rn向web发送信息

this.refs.webview.postMessage(JSON.stringify({data222:'RN向web发送消息成功'}))

web接收RN发送的消息：

window.document.addEventListener('message', function (e) {

const message = JSON.parse(e.data);

alert(message.data222)

})

web向RN发送消息

window.postMessage(

JSON.stringify({data111:'web向RN数据传输成功'})

);

RN接收消息：onMessage={this.showdata.bind(this)}

showdata(e){

let it = this;

let data = JSON.parse(e.nativeEvent.data);

alert(data.data111)

}

6、有些图片需要放在原生的图标位置处，例如RN组件TextInput组件的inlineImageLeft属性的图片需要放在android/app/src/main/res/drawable/password.png处（原生App的图标所在处）。

面临的问题：

问题1、配置环境时，有时一直cannt get bridge,可能因为nodemodules的问题。有的时候使用cnpm下载会无法运行，使用Npm就好了。

问题2、navigator的页面传值问题需要重点学习。

eg1:()=>navigate('Catchtoys',{

'retitle':'抓娃娃'

})

eg2:this.props.navigation.navigate(this.state.retitle1)

问题三、页面间传值也可以使用监听的方法。

eg:DeviceEventEmitter.addListener('refreshtab',()=>{

storage.load({

key: 'routeState',

}).then(ret => {

this.setState({

retitle1:ret.retitl

})

})

});

DeviceEventEmitter.emit('refreshtab');