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.布局-输入框与按钮连接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<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.对象循环找到对应值
1
2
3
4
5
|
var
self =
this
;
Object.keys(self.downPayments).map(
function
(val,i){
if
(val==self.state.payment){
}
})
|