let returnView ; if ( this.state.showEmpty ) { returnView = <Avatar image={require( '../../Images/logo_og.png' )} size ={px2dp( 55 )} textSize ={px2dp( 20 )}/> else { returnView = <FlatList data ={this.state.data} renderItem ={({item}) => ( <DrawNoticeCell name ={item.name} phase ={item.phase} competitionTime ={item.competitionTime} result ={item.result} keyExtractor ={item => item.phase + item.name} return ( {returnView} </View> 复制代码

二：React native - connection has no connection handler error meaning?

解决办法：

1、 Xcode menu -> Product -> Edit Scheme...

2、 Environment Variables -> Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"

三：react native 报错：TypeError: this.setState is not a function

在回调函数中使用 this.setState 的时候，需要在回调函数后面绑定 .bind(this)

VK.api('users.get',{fields: 'photo_50'},function(data){
    if(data.response){
        this.setState({ //the error happens here
            FirstName: data.response[0].first_name
        console.info(this.state.FirstName);
}.bind(this));
复制代码

四：JavaScript parseInt() 函数 字符串转数字

参考连接：JavaScript parseInt() 函数

功能：将特定字符串抓换成数字：

parseInt("10");				//返回 10
parseInt("10期");			//返回 10
复制代码

提示和注释

注释：只有字符串中的第一个数字会被返回。

注释：开头和结尾的空格是允许的。

提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

五：javascript 数组排序

参考链接：JS基础篇--sort()方法的用法，参数以及排序原理

1、将创建一个数组，并按字母顺序进行排序

var arr = new Array(4)
arr[0] = "B"
arr[1] = "C"
arr[2] = "A"
arr[3] = "D"
console.log('arr =' + arr.sort());
// arr =A,B,C,D
2、创建一个数字字符串数组，按照数字大小排序
//	降序: return x - y
//	升序: return x - y
function sortNumber(x, y)
    return x - y
var arr = new Array(4)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
console.log('arr =' + arr.sort(sortNumber));
// arr =5,10,25,40
3、创建一个纯数字数组
var arr=[1, 3, 4, 52010, 3001, 20, 123]
arr.sort(function(a, b) {
    if(a < b) {
    	return -1
    else if(a > b){
    	return 1
    else if(a == b){
    	return 0
console.log('arr =' + arr);
// arr =1,3,4,20,123,3001,52010
4、创建一个对象数组，根据对象属性进行排序
var arr = [    {name:'houzi', age:500},    {name:'bajie', age:600},    {name:'xiaobailong', age:550}];
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
console.log('arr =' + JSON.stringify(arr.sort(compare('age'))));
// arr =[{"name":"houzi","age":500},{"name":"xiaobailong","age":550},{"name":"bajie","age":600}]
复制代码
六：react native动态添加子视图
将组件放入到一个数组里面，然后在渲染的时候，将数组作为参数。
   // 添加篮球
   let BallBlues = [];
   for (let i = 0; i < blueBall.length; i++) {
       BallBlues.push(
           <BallBlue key={i} num={blueBall[i]}/>
   // 添加红球
   let BallReds = [];
   for (let i = 0; i < redBall.length; i++) {
       BallReds.push(
           <BallRed key={i} num={redBall[i]}/>
   return (
       <View style={styles.iTemRootView}>
           <View style={styles.iTemBottomView}>
               {BallBlues}
               {BallReds}
           </View>
       </View>
复制代码
七：JavaScript基础：数组查找指定元素
// 1、数组元素为数字
var arrayNumber = [1, 2, 3];
console.log(arrayNumber.includes(2));	// 输出: true
console.log(arrayNumber.includes(0));	// 输出: false
复制代码
// 1、数组元素为字符串
var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));      // 输出: true
console.log(pets.includes('at'));       // 输出: false
复制代码
八：React Native基础：样式传递
为了让一个 call site 定制你的子组件的样式，你可以通过样式传递。使用 View.propTypes.style 和 Text.propTypes.style，以确保只有样式被传递了。
var List = React.createClass({
  propTypes: {
    style: View.propTypes.style,
    elementStyle: View.propTypes.style,
  render: function() {
    return (
      <View style={this.props.style}>
        {elements.map((element) =>
          <View style={[styles.element, this.props.elementStyle]} />
      </View>
// ... in another file ...
<List style={styles.list} elementStyle={styles.listElement} />
复制代码
九：React Native借力：学习资源
1、ReactNative 学习资源大汇集
十：JavaScript基础：判断函数是否存在
ref属性接收一个function作为回调的时候，需要判断这个函数是否赋值，如果为空会报错
static propTypes = {
    SelectedBall: PropTypes.func,
复制代码
if(typeof this.props.SelectedBall === "function"){
    this.props.SelectedBall(this.props.num, !this.state.selected);
    this.setState({
    	selected: !this.state.selected
复制代码
十一：React Native基础：TouchableHighlight组件
参考链接1
参考链接2
<TouchableHighlight
    style={{marginTop:20}}
    activeOpacity={0.7}
    underlayColor='green'
    onHideUnderlay={()=>{
        this.setState({text:'衬底被隐藏'})
    onShowUnderlay={()=>{
        this.setState({text:'衬底显示'})
    onPress={()=>{
    <View style={styles.button}>
        <Text style={styles.buttonText}>
            TouchableHighlight
        </Text>
    </View>
</TouchableHighlight>
<Text style={styles.text}>{this.state.text}</Text>
复制代码
十二：ios原生调用js以及第三方js开源库
需求：使用js编写工具类，处理业务逻辑给Swift或者OC使用
【代码演示：】
【一图胜万言】
一： js调用原生
方式一：在iOS 7之前采用UIWebView
在iOS7之前，原生应用和Web应用之间很难通信。如果你想在iOS设备上渲染HTML或者运行JavaScript，你不得不使用UIWebView
例如：PhoneGap、WebViewJavascriptBridge
方式二：在iOS 7之后采用JavaScriptCore
JavaScriptCore中类及协议：
JSContext：给JavaScript提供运行的上下文环境
JSValue：JavaScript和Objective-C数据和方法的桥梁
JSManagedValue：管理数据和方法的类
JSVirtualMachine：处理线程相关，使用较少
JSExport：这是一个协议，如果采用协议的方法交互，自己定义的协议必须遵守此协议
二：原生调用JS
Objective-C与JavaScript交互的那些事
笔记：iOS 与 JavaScript 的交互（二）JavaScriptCore
JavaScriptCore in Swift
十三：react native 使用realm studio查看数据库文件
1、查看默认路径
console.log('realm path:', realm.path)
复制代码
2、自定义路径，方便调试
// 新建表模型
const PersonSchema = {
    name: 'Person',
    primaryKey:'id',    // 官方没给出自增长的办法,而且一般不会用到主键,这也解决了重复访问的问题
    properties: {
        id:'int',
        name: 'string',
        tel_number: {type: 'string', default: '156xxxxxxxx'},   // 添加默认值的写法
        city: 'string' // 直接赋值的方式设置类型
const schemas = 
[    {        schema: [PersonSchema], 
        schemaVersion: 0, 
        path: '/Users/userName/Desktop/realmDB/myModel.realm'
let realm = new Realm(schemas[schemas.length - 1]) 
复制代码
1、参考官方