ReactNative技术知识总结有哪些细节和技巧？

本文共计485个文字，预计阅读时间需要2分钟。

1. JSON解析：使用`JSON.parse()`解析JSON字符串，可以选择修改解析后的值及其属性，然后返回解析后的值。`JSON.stringify()`返回指定值的JSON字符串。

1.JSON developer.mozilla.org/zh-CN/docs/Web/Javascript/Reference/Global_Objects/JSON

• JSON.parse()解析JSON字符串, 可以选择改变前面解析后的值及其属性，然后返回解析的值。

• JSON.stringify()返回指定值的 JSON 字符串，可以自定义只包含某些特定的属性或替换属性值。

2.转换图片得到图片的uri

import resolveAssetSource from 'resolveAssetSource';var img = require('./qaq.png');var source = resolveAssetSource(img);

获取img图片：

3.布局－输入框与按钮连接

this.setState({text})} placeholder="输入文字..." maxLength={10} autoFocus={true} returnKeyType="go" clearButtOnMode="always"/> this._makeTransImage(this.state.text,source.uri)}> 确认

4.如何让我们自己的插件支持npm install和rnpm link？

首先需要在我们的插件文件夹中添加一个package.json文件（name要修改）： { "name": "react-native-nc-gpuimage", "version": "1.0.0", "description": "nc-gpuimage", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" var imageSvc = { addTextOnTransparentImage: function (text, imagePath) { return new Promise(function (resolve, reject) { imageFilterManager.addTextOnTransparentImage(text, imagePath, resolve, reject); }); }, addImageOnImage: function (aboveImagePath, belowImagePath, fromLeft, fromTop, radius) { return new Promise(function (resolve, reject) { imageFilterManager.addImageOnImage(aboveImagePath, belowImagePath, fromLeft, fromTop, radius, resolve, reject); }); } }; export default imageSvc;

文件添加完成后，需要我们将项目关闭后，再分别执行npm install和rnpm link命令。

我们可以检查一下node_modules文件中是否有我们的插件。

使用方法：在需要用到函数的文件中先引用这个插件：import imageSvc from 'react-native-nc-gpuimage'; 然后再使用插件中的函数。

5.TextInput键盘问题

添加这个属性：keyboardShouldPersistTaps={false}

这样在iOS上，输入框打开后，手点击空白处，键盘就会自动下去了

6.对象循环找到对应值

var self = this;Object.keys(self.downPayments).map(function(val,i){ if(val==self.state.payment){ }})