RN常用表达式

1、样式使用
所有的核心组件都支持样式属性
<View style={styles.base}></View>
当你需要设置多个属性类的时候，可以传入一个数组
<View style={[styles.base,styles.backgroundColor]}></View>

<View
style={[styles.base,{width:this.state.width}]}
/>
<Image source={require('./my-icon.png')} />
2.样式类的写法
const styles = StyleSheet.create({
container: {
flex: 1,
},
});

2、样式使用
所有的核心组件都支持样式属性
<View style={styles.base}></View>
当你需要设置多个属性类的时候，可以传入一个数组
<View style={[styles.base,styles.backgroundColor]}></View>

2、rn样式与css样式的异同

首先样式的命名规则全部采用驼峰写法，不能使用其他写法，这样的要求估计也是按照js的写法规则来走的；其次就是上面说的rn样式是css样式的一个子集；下面列出了一些其他的差异：

View类似于DIV，会默认占用容器的100%的宽度

rn元素的绝对定位和相对定位不需要父元素设置position，且没有zIndex配置

不能以偏概全说rn的inline元素不能设置marginTop、marginBottom；
需要注意的是：包裹在View元素中的Text表现为block，可以设置margin和padding的各种属性；包裹在Text元素中的Text表现为inline元素，不能设置其marginTop和marginBottom， padding等用于block元素的属性

样式的继承只存在于Text元素内的Text元素，换句话说是Text元素里面的Text元素存在继承；继承的规则是子Text元素继承祖先Text和父Text元素的样式整合后的样式。
复制代码
<Text>文本样式继承</Text>
<View style={{backgroundColor:'#333',padding:10}}>
<Text style={{color:'white',fontSize:18,fontWeight:'bold'}}>
<Text style={{color:'red'}}>
<Text>父：我是white还是red{'\n'}
<Text>子：那我是神马颜色</Text>
</Text>
</Text>
<Text>{'\n'}我应该是white</Text>
</Text>
</View>
复制代码
上面运行结果如下：
可以看出，子Text元素继承了父Text的color样式和祖先Text元素的样式fontSize、fontWeight

2.常用的类名字
head
foot
ul
li
th
td
left
right

2、js使用
数组装换对象：JSON.stringify(props)
对象装换数组：Array.from(arrayLike);
data: [...this.state.data, ...dataList],
3.遍历
render() {
const { help } = this.props.store;
return (
<View style={{ flex: 1, backgroundColor: '#ffffff',flexDirection:'column'}}>
{
help.map((item, index)=>{
return (
<Text>{txt}</Text>
)
})
}
</View>
);
}
1.时间点击方法
<Text style={item.focus == 1?styles.liguanyi:styles.liguan} onPress={() => this.focusBtn(item)}>{item.focus == 1 ? "已关注" : "关注"}</Text>
onPress={()=>this.follow(item.uid,item.focus) }
1.网络请求
fetch(XHD + '/api/daren/daren_focus', {
method: 'POST',
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: 'token=' + token + "&type=" + will_type + '&daren_uids=' + item.daren_uid,
}).then(response => response.json())
.then(data => {
if (data.code === 1000) {

      } else {
        console.error(data);
      }
    }).catch(error => {
      console.error(error);
    });

4.判断
{index == 0?<Image
source={require('../images/dr_icon_no1.png')}
style={styles.thumbnails}
/>:null}
5.保存数据
this.setState({
dataArray:dataArray,
});
6.宽高
const deviceWidth = Dimensions.get('window').width; //设备的宽度
const deviceHeight = Dimensions.get('window').height; //设备的高度
const { deviceWidth, deviceHeight } = Dimensions.get('window');

1
@ 用途：图片的显示
1、设计稿的图片width/设计稿的width = a; 图片自身的比例 b = 图片的width/图片的height;

2、实际的代码中 width = deviceWidth * a;
3、实际的代码中 height = 代码中width / b;
这样就会在各个屏幕中显示的图片差异较小
7.向一个对象数组里面添加新的属性

var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];

var arry2=[];

arry.map(((item, index)=> {
arry2.push(Object.assign({},item,{mess1:item.c,mess2:item.d}))
}))

console.log(arry2);
将一个对象数组数据拿出来变成另一个对象

var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];

var arry2=[];
arry.map(((item, index)=> {
arry2.push(Object.assign({},{mess1:item.c,mess2:item.d}))
}))

console.log(arry2);
7.数据叠加
dataArray:this.state.dataArray.concat(dataBlob),
8.对象里面添加属性
const object1 = {
a: 1,
b: 2,
c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d);
// expected output: 3 5

var obj = {'a':'123','b':'345'};

console.log(Object.keys(obj));
//['a','b']

var obj1 = { 100: "a", 2: "b", 7: "c"};
c
onsole.log(Object.keys(obj1));
// console: ["2", "7", "100"]

var obj2 = Object.create({}, { getFoo : { value : function () { return this.foo } } });

obj2.foo = 1;
console.log(Object.keys(obj2));
// console: ["foo"]

9。左边固定， 右边固定，中间 flex 的布局

<View style={styles.flexContainer}>
  <View style={styles.cellfixed}>
    <Text style={styles.welcome}>
      fixed
    </Text>
  </View>
  <View style={styles.cell}>
    <Text style={styles.welcome}>
      flex
    </Text>
  </View>
  <View style={styles.cellfixed}>
    <Text style={styles.welcome}>
      fixed
    </Text>
  </View>
</View>

styles = {
    flexContainer: {
        // 容器需要添加 direction 才能变成让子元素 flex
        flexDirection: 'row'
    },
    cell: {
        flex: 1,
        height: 50,
        backgroundColor: '#aaaaaa'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    cellfixed: {
        height: 50,
        width: 80,
        backgroundColor: '#fefefe'
    } 
}

10.苹果跟安卓的兼容性判断
import {
Platform,
} from "react-native";
marginTop: Platform.OS === 'ios' ? 20 : 10,
11.ES6合并多数组对象
let obj = Object.assign(t.A, fourEnd.A[0])//ES6合并多数组对象；或者let obj1={...objOne,...objTwo};
12。//数组去重对象
let arrA=[];
for (let c = 0; c < fourEnd.A[0].length;c++){
let flagA =true;
for (let d = 0; d < t.A.length;d++){
if (t.A[d].img == fourEnd.A[0][c].img && t.A[d].text == fourEnd.A[0][c].text){
flagA = false;
}
}
if (flagA) {
arrA.push(fourEnd.A[0][c]);
}
}
console.log(arrA)