前段时间接触了一点RN的开发，总结了以下的一些问题以及解决方法
AppRegistry.registerComponent('projectName', () => componentName); 一般只会用到一次, projectName 必须和文件夹名字一样.
在iOS上使用http链接的图片地址可能不会显示，解决方案:https://segmentfault.com/a/1190000002933776
图片如果使用网络地址的话，source有固定的格式，资源属性是一个对象，而且必须指定宽高
<Image source={{'uri': 'https://xxxxx'}} style={{width:193, height: 110}} />
-
引入本地图片的一些注意点
使用本地图片，直接require
require中的图片名字必须是一个静态字符串，不能是一个变量或者表达式
与网络图片相比，Packager可以得知图片大小了，不需要在代码里再声明一遍尺寸
如果有banana.ios.jpg和banana.android.jpg，Packager就会根据平台而选择不同的文件
倍图，可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片
<Image source={require('./images/banana.jpg')} />
- StyleSheet.create 用来定义组件的样式
<Text style={styles.red}>red text</Text>
<Text style={styles.green}>green text</Text>
const styles = StyleSheet.create({
red: {
fontSize: 40
},
green: {
color: 'green'
}
})
注意要使用驼峰写法
-
尺寸（宽度和高度）：React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。
<View style={{width: 100, height: 100, backgroundColor: 'blue'}}></View> flexbox (有个区别，flexDirection的默认方向是 column)
处理文本输入 组件：TextInput 事件： onChangeText
背景图的实现(通过嵌套来实现),不存在 backgroundImage
<Image source={...}>
<Text>Inside code</Text>
</Image>
ios 圆角的不好处理 : 不要裸用Image标签，在外面套一层<View>，让borderRadius作用在View标签
ScrollView 一个通用的可滚动的容器，可以垂直也可以水平滚动（通过horizontal属性来设置） --- 适合用来显示数量不多的滚动元素
FlatList 用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同，更适于长列表数据，且元素个数可以增删，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
网络请求 => Fetch 应用中访问任何网站不会出现跨域，还可以使用ES7的async/await ， 或者使用其他第三方库
async getMoviesFromApi() {
try { // 注意这里的await语句，其所在的函数必须有async关键字声明
let response = await fetch('https://facebook.github.io/react-native/movies.json');
let responseJson = await response.json();
return responseJson.movies;
} catch(error) {
console.error(error);
}
}
class xxx extends Component {} 这种方式必须this.eventName.bind(this)这种方法来正确的绑定this,或者方法直接写成箭头函数，就可以直接用 this.eventName 调用
字符串new Date()会有问题，NaN，最好让后端直接返回时间戳
更改手机statusbar的颜色
有时候需要做沉浸式的头图，这时候如果ios的statusbar内容颜色为黑色时，则看不到statusbar了，这时候就需要设置一下
import { StatusBar } from 'react-native'
render() {
StatusBar.setBarStyle('light-content', true);
}
- 处理证书异常，拦截ssl请求错误q
@Override
public void onReceivedSslError(WebView view,SslErrorHandler handler, SslError error) {
// handler.proceed(); 接受证书
super.onReceivedSslError(view, handler, error);
mFail = true;
showFail();
String msg = "您访问的页面SSL证书异常";
mLoadingView.statusToFail(msg);
}
-
RN与H5 postMessage 重复的问题，解决方案：
const patchPostMessageJsCode = `(${String(function() { var originalPostMessage = window.postMessage var patchedPostMessage = function(message, targetOrigin, transfer) { originalPostMessage(message, targetOrigin, transfer) } patchedPostMessage.toString = function() { return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage') } window.postMessage = patchedPostMessage })})();` injectedJavaScript={patchPostMessageJsCode} react-native run-android 报错
cd android/
vim local.properties
写入以下内容:
sdk.dir = /Users/USERNAME/Library/Android/sdk
or
vim ~/.zshrc
export ANDROID_HOME=/Users/guest/Library/Android/sdk
本文首发于 : http://ghost.omeme.me/2017/07/22/react-native-kai-fa-zhong-peng-dao-de-wen-ti-zong-jie/
