Reactnative开发中记录下来的几个问题-优快云博客

本文分享了ReactNative开发中实用的技巧，包括条件渲染、错误排查、动态添加视图、数组操作等，还有样式传递、TouchableHighlight组件使用及跨平台调用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@(ReactNative笔记)

[TOC]

一：react native中如何实现条件判断显示不同视图

render() {
        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 (
            <View>
                {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]) 
复制代码