React Native技术知识总结

1.JSON https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSONJSON.parse()解析JSON字符串, 可以选择改变前面解析后的值及其属性，然后返回解析的值。JSON.stringify()返回指定值的 JSON 字符串，可以自定

qwe1134502476

444人浏览 · 2016-09-21 16:18:43

qwe1134502476 · 2016-09-21 16:18:43 发布

1.JSON

https://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图片：<Image resizeMode={'contain'} style={{width:140,height:140}} source={{uri:image}}/>

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

     
           <View
          
             style={{flexDirection:  'row' ,alignItems:  'center' ,alignSelf:  'stretch' , justifyContent: 'center' , backgroundColor: '#fff' ,padding:15}}>
          
                <TextInput
          
             style={{height:40,fontSize:15, borderWidth:1, borderColor: '#eee' , width:220, padding:10}}
          
                    multiline={ false }
          
                    autoCapitalize= "none"
          
             autoCorrect={ false }
          
                    value={ this .state.text}
          
                    onChangeText={(text)=> this .setState({text})}
          
                    placeholder= "输入文字..."
          
             maxLength={10}
          
                    autoFocus={ true }
          
                    returnKeyType= "go"
          
             clearButtonMode= "always" />
          
                <Button
          
             containerStyle={{height:40, alignItems:  'center' , backgroundColor:  '#00a7ec' , paddingTop:7, paddingLeft:15, paddingRight:15}}
          
                    style={{ color: '#ffffff' }}
          
                    onPress={()=> this ._makeTransImage( this .state.text,source.uri)}>
          
                    确认
          
                </Button>
          
           </View>

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\" && exit 1" }, "author": "Northcloud", "license": "MIT" }
接着在我们的插件文件夹中田健一个index.js文件，将我们需要的函数封装进来： import {imageFilterManager} from 'NativeModules'; 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){
            
               }
            
             })

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

flutter_exit_app 鸿蒙化适配全流程攻略（含踩坑实录）

在 Flutter 鸿蒙化（OpenHarmony/ArkUI-X）开发过程中，第三方插件适配是核心难点之一。flutter_exit_app 作为常用的应用退出插件，默认仅支持 Android 和 iOS 平台，无法直接在鸿蒙设备上使用。本文将详细记录 flutter_exit_app 插件鸿蒙化适配的完整实操流程，包含环境搭建、代码适配、远程提交、常见问题及解决方案，全程贴合实战，新手也能跟着

开源鸿蒙跨平台开发者社区

OpenHarmony-Flutter环境搭建指导

下载地址：https://git-scm.com/install/windows点击下载并安装：安装过程不用更改任何选项，安装路径可以看个人习惯更改下载链接：https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html点击下载并安装：下载地址：https://developer.huawei.com/con