【JS】逻辑处理
1.计算会员进度
const a = res.data.directCount（当前充值点券） / nextLevelData.map(item => item.direct_number（下一级需要点券）); //得出小数const c = 设计稿长度 /375 * Dimensions.get('window').width; （进度条长度）
会员进度： width1: 0.5 * 140 = 70 （假设）
满级时会员进度
<View style={[ styles.barActive, { width: '96%', }, ]} /> <View style={[ styles.process, { // transform: [{translateX: Dimensions.get('window').width < 410 ? autoWidth(243):autoWidth(255)}], //这里不用transform了 因为他不能用百分比 left:'96%' //用这个 }, ]} >
会员进度页面
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Image,
ActivityIndicator,
ImageBackground,
Dimensions,
ScrollView,
} from 'react-native';
import NavigationBar from '../../components/base/NavigationBar';
import {Toast, Theme} from 'teaset';
import {inject, observer} from 'mobx-react/index';
import FastImage from 'react-native-fast-image';
import Http from '../../utils/Http';
import Touchable from '../../components/base/Touchable';
import Config from '../../Config';
import Styles, {theme1, theme} from '../../style/Lib';
import Shadow from '../../style/Shadow';
const icon = [
require('../../resource/icon/user/level00.png'),
require('../../resource/icon/user/vip1.png'),
require('../../resource/icon/user/vip2.png'),
require('../../resource/icon/user/vip3.png'),
require('../../resource/icon/user/vip4.png'),
require('../../resource/icon/user/vip5.png'),
];
const vipdegree = [
require('../../resource/icon/user/v0.png'),
require('../../resource/icon/user/v1.png'),
require('../../resource/icon/user/v2.png'),
require('../../resource/icon/user/v3.png'),
require('../../resource/icon/user/v4.png'),
require('../../resource/icon/user/v5.png'),
];
const smallvip = [
require('../../resource/icon/user/small_v0.png'),
require('../../resource/icon/user/small_v1.png'),
require('../../resource/icon/user/small_v2.png'),
require('../../resource/icon/user/small_v3.png'),
require('../../resource/icon/user/small_v4.png'),
require('../../resource/icon/user/small_v5.png'),
];
const vipbg = [
require('../../resource/icon/user/v0_bg.png'),
require('../../resource/icon/user/v1_bg.png'),
require('../../resource/icon/user/v2_bg.png'),
require('../../resource/icon/user/v3_bg.png'),
require('../../resource/icon/user/v4_bg.png'),
require('../../resource/icon/user/v5_bg.png'),
];
const bgcolor = ['#AEBBC6', '#19448E', '#049406', '#FF9736', '#992A80', '#DB3434'];
const vipBanner = require('../../resource/icon/user/vip_show.png');
function autoWidth(width) {
return width / 375 * Dimensions.get('window').width;
}
@inject('store')
@observer
export default class Level extends Component {
constructor(props) {
super(props);
this.state = {
loading: true,
data: {
totalRecommendNum: 0,
vipLevel: 0,
nextRecommedNum: 0,
},
list: [],
width1: 0,
width2: 0,
};
}
static navigationOptions = () => {
return {
header: null,
headerMode: 'none',
};
};
componentDidMount() {
this._loadLevel();
}
Percentage(num1, num2) {
return Math.round(num1 / num2 * 10000) / 100.0 + '%';
}
_loadLevel() {
this.setState({loading: true});
Http.post('/api/v1/friends/vipLevel', {})
.then((res) => {
if (res.status === 10000) {
const nextLevelData = res.data.data.filter((item) => item.id === res.data.level + 1);
const a = res.data.directCount / nextLevelData.map((item) => item.direct_number);
const b = res.data.allCount / nextLevelData.map((item) => item.tree_number);
const c = autoWidth(122);
this.setState({
data: res.data,
list: res.data.data.reverse(),
needShare:
res.data.level === 5
? 0
: nextLevelData.map((item) => item.direct_number) - res.data.directCount, //下一级需要分享数量
nextShare: nextLevelData.map((item) => item.direct_number), //下一级分享数量
needPyq:
res.data.level === 5
? 0
: nextLevelData.map((item) => item.tree_number) - res.data.allCount, //下一级需要朋友圈数量
nextPyq: nextLevelData.map((item) => item.tree_number), //下一级朋友圈数量
currentShare: res.data.directCount, //当前分享
currentPyq: res.data.allCount, //当前朋友圈
level: res.data.level,
width1: res.data.level === 5 ? c : a * c,
width2: res.data.level === 5 ? c : b * c,
});
} else {
Toast.message(res.message);
}
this.setState({loading: false});
})
.catch((err) => {
Toast.message(err);
this.setState({loading: false});
});
}
render() {
const tips = [
'1. VIP等级由直推好友数和朋友圈好友数直接决定，其中朋友圈好友数包含直推好友数。',
`2. 当您的直推好友数和朋友圈好友数同时满足等级要求时，您将获得专属等级标签和等级福利。`,
'3. 我们会不定期对您的朋友圈进行账户审查，若出现大批量零活跃度用户，我们有可能对您做降级处理。',
'4. 零活跃度用户判定条件主要包括：超过一个月未登录、注册满三个月但未参与任何功能版块、新注册用户7天内未登录。',
'5. 若您对您当前的VIP等级存在疑问，请您联系官方客服协助处理。',
];
const {needPyq, level, needShare, currentPyq, currentShare, width1, width2} = this.state;
return (
<View style={{flex: 1, backgroundColor: '#fff'}}>
<NavigationBar
onBack={() => {
this.props.navigation.pop();
}}
title={'会员等级'}
NoBorderBottom
/>
<ScrollView>
<ImageBackground
imageStyle={{borderRadius: 6}}
source={vipbg[level]}
style={[styles.avatar]}
>
<View>
<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
<FastImage
style={{
width: 30,
height: 30,
borderRadius: 15,
marginRight: 8,
overflow: 'hidden',
backgroundColor: '#C9D3FF',
}}
resizeMode={FastImage.resizeMode.cover}
source={{
uri:
this.props.store.User.profile && this.props.store.User.profile.avatar
? `https://fowin.oss-ap-southeast-1.aliyuncs.com/${this.props.store.User
.profile.avatar}`
: `${Config.domain}/static/fowin/e33fb652-0919-4ca1-882d-f89b2715a05e`,
priority: FastImage.priority.high,
}}
/>
<Image
style={{
marginVertical: 0,
width: 52,
height: 20,
marginRight: 2,
resizeMode: 'contain',
}}
source={vipdegree[level]}
/>
</View>
{
level === 5 ?
<View
style={{
marginTop: 21,
width: 140,
marginBottom: 4,
paddingHorizontal: 4,
paddingVertical: 2,
borderRadius: 6,
marginLeft: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: bgcolor[level],
...Shadow.shadow,
}}
>
<Text style={{
color: Styles.theme1.tw,
fontSize: 12,
// marginHorizontal: 35
}}>分享更多好友收益更多</Text></View> :
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
width: Dimensions.get('window').width - 120,
marginLeft: 25,
marginTop: 21,
}}
>
<View
style={{
paddingHorizontal: 4,
paddingVertical: 2,
borderRadius: 6,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: bgcolor[level],
...Shadow.shadow,
}}
>
<Text style={{color: Styles.theme1.tw, fontSize: 12, opacity: 0.7}}>
差{needShare}个直推
</Text>
</View>
<View
style={{
paddingHorizontal: 4,
borderRadius: 6,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: bgcolor[level],
...Shadow.shadow,
}}
>
<Text style={{color: Styles.theme1.tw, fontSize: 12, opacity: 0.7}}>
还需分享{needPyq}个朋友圈
</Text>
</View>
</View>
}
{
level === 5 ?
<View style={{flexDirection: 'row', alignItems: 'center', marginHorizontal: 0}}>
<Image
style={{
// marginVertical: 13,
width: 15,
height: 12,
marginRight: 5,
resizeMode: 'contain',
flex: 0,
}}
source={smallvip[5]}
/>
<View style={{position: 'relative', marginRight: 0, flex: 1}}>
<View
style={{
flexDirection: 'row',
alignItem: 'center',
}}
>
<View style={styles.v5bar}/>
<View
style={[
styles.barActive,
{
width: '96%',
},
]}
/>
<View
style={[
styles.process,
{
// transform: [{translateX: Dimensions.get('window').width < 410 ? autoWidth(243):autoWidth(255)}],
left:'96%'
},
]}
>
<View
style={{
height: 7,
width: 7,
backgroundColor: Styles.theme1.tw,
borderRadius: 4,
marginTop: -2,
}}
/>
</View>
</View>
</View>
<Text style={{color: '#FFF', fontSize: 10}}>MAX</Text>
</View> :
<View style={{flexDirection: 'row', alignItems: 'center', marginHorizontal: 0}}>
<Image
style={{
// marginVertical: 13,
width: 15,
height: 12,
marginRight: 5,
resizeMode: 'contain',
flex: 0,
}}
source={smallvip[level]}
/>
<View style={{position: 'relative', marginRight: 0, flex: 1}}>
<View
style={{
flexDirection: 'row',
alignItem: 'center',
}}
>
<View style={styles.bar}/>
<View
style={[
styles.barActive,
{
width: width1,
},
]}
/>
<View
style={[
styles.process,
{
transform: [{translateX: width1}],
},
]}
>
<View
style={{
position: 'absolute',
top: -2,
height: 7,
width: 7,
backgroundColor: Styles.theme1.tw,
borderRadius: 4,
}}
/>
</View>
</View>
</View>
<View style={{width: 8}}/>
<View style={{position: 'relative', marginRight: 0, flex: 1}}>
<View
style={{
flexDirection: 'row',
alignItem: 'center',
}}
>
<View style={styles.bar}/>
<View
style={[
styles.barActive,
{
width: width2,
},
]}
/>
<View
style={[
styles.process,
{
transform: [{translateX: width2}],
},
]}
>
<View
style={{
position: 'absolute',
top: -2,
height: 7,
width: 7,
backgroundColor: Styles.theme1.tw,
borderRadius: 4,
}}
/>
</View>
</View>
</View>
<Image
style={{
marginVertical: 13,
width: 15,
height: 12,
marginLeft: 10,
resizeMode: 'contain',
flex: 0,
}}
source={smallvip[level + 1]}
/>
</View>
}
<View style={{flexDirection: 'row', alignItems: 'center', marginHorizontal: 20,marginTop:18}}>
<Text style={{color: Styles.theme1.tw, fontSize: 12, marginRight: 5}}>
已分享{currentShare}个好友，朋友圈已有{currentPyq}个好友
</Text>
<Touchable
delayPress={300}
onPress={() => {
this.props.navigation.navigate('UserFriends');
}}
>
<Text style={{fontSize: 12, color: Styles.theme1.tw}}>查看 ></Text>
</Touchable>
</View>
</View>
</ImageBackground>
<View style={{flex: 0, borderRadius: 0, marginHorizontal: 20}}>
<View
style={{
borderRadius: 10,
marginTop: 20, borderWidth: 1, borderColor: '#F8F8F8', borderBottomWidth: 0,
}}
>
<View
style={{
flexDirection: 'row',
paddingVertical: 16,
backgroundColor: Styles.theme1.bgc,
}}
>
<Text style={{flex: 1, textAlign: 'center', color: Styles.theme.g3, fontSize: 14}}>
等级
</Text>
<Text style={{flex: 1, textAlign: 'center', color: Styles.theme.g3, fontSize: 14}}>
分享
</Text>
<Text style={{flex: 1, textAlign: 'center', color: Styles.theme.g3, fontSize: 14}}>
朋友圈
</Text>
{/* <Text style={{flex: 1, textAlign: 'right', color: '#333', fontSize: 14}}>等级名称</Text> */}
</View>
{this.state.loading ? (
<View style={{paddingTop: 20}}>
<ActivityIndicator/>
</View>
) : (
this.state.list.map((item, index) => (
<View
key={index}
style={{
flexDirection: 'row',
borderTopColor: Styles.theme1.tw,
backgroundColor: index % 2 === 1 ? Styles.theme1.bgc : Styles.theme1.tw,
borderTopWidth: 1,
paddingVertical: 10,
alignItems: 'center',
}}
>
<View
style={{
flex: 1,
textAlign: 'center',
alignItems: 'center',
paddingVertical: 6,
}}
>
<Image
style={{width: 44, height: 11, marginRight: 2, resizeMode: 'contain'}}
source={icon[item.lever]}
/>
</View>
<Text
style={{
flex: 1,
textAlign: 'center',
fontSize: 14,
color: Styles.theme.g3,
paddingVertical: 2,
}}
>
{item.direct_number}
</Text>
<Text
style={{
flex: 1,
textAlign: 'center',
fontSize: 14,
color: Styles.theme.g3,
paddingVertical: 2,
}}
>
{item.tree_number}
</Text>
</View>
))
)}
</View>
<View style={{borderTopColor: Styles.theme1.bgc, borderTopWidth: 1, marginHorizontal: 2}}/>
</View>
<View style={{paddingTop: 16, paddingHorizontal: 23}}>
<Text style={{color: theme.g3, fontSize: theme.z18, marginBottom: 0, fontWeight: 'bold'}}>
会员等级说明
</Text>
{tips.map((item, index) => (
<Text
key={index}
style={{
color: Styles.theme1.tc2,
fontSize: 13,
lineHeight: 20,
marginTop: 6,
}}
>
{item}
</Text>
))}
</View>
<View style={{paddingTop: 16, paddingHorizontal: 23}}>
<Text style={{
color: theme.g3,
fontSize: theme.z18,
marginBottom: 6,
fontWeight: 'bold',
}}>会员优选</Text>
<Text style={{marginBottom: 15, fontSize: 12, color: theme1.tph}}>根据您的会员等级，为您精选一下优秀活动~</Text>
</View>
<View style={{marginBottom: Theme.screenInset.bottom + 16, alignItems: 'center'}}>
<Image
style={{width: 330 / 375 * Dimensions.get('window').width, resizeMode: 'contain'}}
source={vipBanner}
/>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
avatar: {
padding: 15,
marginHorizontal: 23,
borderRadius: 10,
minHeight: 150,
marginTop: 10,
},
member: {
padding: 10,
},
bar: {
position: 'absolute',
height: 3,
// marginTop: 2.4,
marginHorizontal: 3,
backgroundColor: '#fff',
borderRadius: 2,
opacity: 0.2,
width: autoWidth(122),
},
v5bar: {
position: 'absolute',
height: 3,
// marginTop: 2.4,
marginHorizontal: 3,
backgroundColor: '#fff',
borderRadius: 2,
opacity: 0.2,
width: autoWidth(244),
},
barActive: {
position: 'absolute',
height: 3,
borderRadius: 2,
// marginTop: 2.4,
marginHorizontal: 3,
backgroundColor: '#fff',
},
process: {
position: 'absolute',
height: 20,
top: 0,
left: 0,
},
});
2.计算小数点.toFixed(2) 取小数点后两位
3.后台传值来选取选项Option
const select = [ { name: '筛选时间', type: 'date', dataIndex: ['start_time', 'end_time'] }, { name: '交易所', type: 'select', option: [ { id: 'huobipro', name: 'huobipro' }, { id: 'binance', name: 'binance' } ], dataIndex: 'exchange' }, { name: '交易对', type: 'select', option: [], dataIndex: 'symbol' } ] componentDidMount() { this.getSymobls() } getSymobls() { HttpUtils.postForm('/api/teacher/trade/exchange/symbols', {}).then(res => { if (res.status === 10000) { let arr1 = new Set(res.data.map((item) => item.symbol)) let symbol = Array.from(arr1).map(item => ({id: item, name: item})); select[2].option = symbol; //添加列表 this.setState({ select: this.state.select, }) } }).catch((err) => { console.log(err); }) }
后台传来的数据
1 { 2 "data": [ 3 { 4 "id": 1, 5 "created_at": "0001-01-01T00:00:00Z", 6 "updated_at": "0001-01-01T00:00:00Z", 7 "deleted_at": null, 8 "exchange": "huobipro", 9 "symbol": "ADA/USDT", 10 "left_coin": "ADA", 11 "right_coin": "USDT", 12 "min_unit_amount": 1 13 }, 14 { 15 "id": 2, 16 "created_at": "0001-01-01T00:00:00Z", 17 "updated_at": "0001-01-01T00:00:00Z", 18 "deleted_at": null, 19 "exchange": "huobipro", 20 "symbol": "TRX/USDT", 21 "left_coin": "TRX", 22 "right_coin": "USDT", 23 "min_unit_amount": 1 24 }, 25 { 26 "id": 3, 27 "created_at": "0001-01-01T00:00:00Z", 28 "updated_at": "0001-01-01T00:00:00Z", 29 "deleted_at": null, 30 "exchange": "binance", 31 "symbol": "ADA/USDT", 32 "left_coin": "ADA", 33 "right_coin": "USDT", 34 "min_unit_amount": 11 35 }, 36 { 37 "id": 4, 38 "created_at": "0001-01-01T00:00:00Z", 39 "updated_at": "0001-01-01T00:00:00Z", 40 "deleted_at": null, 41 "exchange": "binance", 42 "symbol": "EOS/USDT", 43 "left_coin": "EOS", 44 "right_coin": "USDT", 45 "min_unit_amount": 11 46 }, 47 { 48 "id": 5, 49 "created_at": "0001-01-01T00:00:00Z", 50 "updated_at": "0001-01-01T00:00:00Z", 51 "deleted_at": null, 52 "exchange": "huobipro", 53 "symbol": "EOS/USDT", 54 "left_coin": "EOS", 55 "right_coin": "USDT", 56 "min_unit_amount": 1 57 }, 58 { 59 "id": 6, 60 "created_at": "0001-01-01T00:00:00Z", 61 "updated_at": "0001-01-01T00:00:00Z", 62 "deleted_at": null, 63 "exchange": "huobipro", 64 "symbol": "ETH/USDT", 65 "left_coin": "ETH", 66 "right_coin": "USDT", 67 "min_unit_amount": 1 68 }, 69 { 70 "id": 7, 71 "created_at": "0001-01-01T00:00:00Z", 72 "updated_at": "0001-01-01T00:00:00Z", 73 "deleted_at": null, 74 "exchange": "huobipro", 75 "symbol": "BTC/USDT", 76 "left_coin": "BTC", 77 "right_coin": "USDT", 78 "min_unit_amount": 1 79 }, 80 { 81 "id": 8, 82 "created_at": "0001-01-01T00:00:00Z", 83 "updated_at": "0001-01-01T00:00:00Z", 84 "deleted_at": null, 85 "exchange": "huobipro", 86 "symbol": "ETC/USDT", 87 "left_coin": "ETC", 88 "right_coin": "USDT", 89 "min_unit_amount": 1 90 }, 91 { 92 "id": 9, 93 "created_at": "0001-01-01T00:00:00Z", 94 "updated_at": "0001-01-01T00:00:00Z", 95 "deleted_at": null, 96 "exchange": "huobipro", 97 "symbol": "BCH/USDT", 98 "left_coin": "BCH", 99 "right_coin": "USDT", 100 "min_unit_amount": 1 101 }, 102 { 103 "id": 10, 104 "created_at": "0001-01-01T00:00:00Z", 105 "updated_at": "0001-01-01T00:00:00Z", 106 "deleted_at": null, 107 "exchange": "huobipro", 108 "symbol": "HT/USDT", 109 "left_coin": "HT", 110 "right_coin": "USDT", 111 "min_unit_amount": 1 112 }, 113 { 114 "id": 11, 115 "created_at": "0001-01-01T00:00:00Z", 116 "updated_at": "0001-01-01T00:00:00Z", 117 "deleted_at": null, 118 "exchange": "huobipro", 119 "symbol": "XRP/USDT", 120 "left_coin": "XRP", 121 "right_coin": "USDT", 122 "min_unit_amount": 1 123 }, 124 { 125 "id": 12, 126 "created_at": "0001-01-01T00:00:00Z", 127 "updated_at": "0001-01-01T00:00:00Z", 128 "deleted_at": null, 129 "exchange": "huobipro", 130 "symbol": "LTC/USDT", 131 "left_coin": "LTC", 132 "right_coin": "USDT", 133 "min_unit_amount": 1 134 }, 135 { 136 "id": 13, 137 "created_at": "0001-01-01T00:00:00Z", 138 "updated_at": "0001-01-01T00:00:00Z", 139 "deleted_at": null, 140 "exchange": "binance", 141 "symbol": "EOS/USDT", 142 "left_coin": "EOS", 143 "right_coin": "USDT", 144 "min_unit_amount": 11 145 }, 146 { 147 "id": 14, 148 "created_at": "0001-01-01T00:00:00Z", 149 "updated_at": "0001-01-01T00:00:00Z", 150 "deleted_at": null, 151 "exchange": "binance", 152 "symbol": "ETH/USDT", 153 "left_coin": "ETH", 154 "right_coin": "USDT", 155 "min_unit_amount": 11 156 }, 157 { 158 "id": 15, 159 "created_at": "0001-01-01T00:00:00Z", 160 "updated_at": "0001-01-01T00:00:00Z", 161 "deleted_at": null, 162 "exchange": "binance", 163 "symbol": "BTC/USDT", 164 "left_coin": "BTC", 165 "right_coin": "USDT", 166 "min_unit_amount": 11 167 }, 168 { 169 "id": 16, 170 "created_at": "0001-01-01T00:00:00Z", 171 "updated_at": "0001-01-01T00:00:00Z", 172 "deleted_at": null, 173 "exchange": "binance", 174 "symbol": "ETC/USDT", 175 "left_coin": "ETC", 176 "right_coin": "USDT", 177 "min_unit_amount": 11 178 }, 179 { 180 "id": 17, 181 "created_at": "0001-01-01T00:00:00Z", 182 "updated_at": "0001-01-01T00:00:00Z", 183 "deleted_at": null, 184 "exchange": "binance", 185 "symbol": "BCHABC/USDT", 186 "left_coin": "BCHABC", 187 "right_coin": "USDT", 188 "min_unit_amount": 11 189 }, 190 { 191 "id": 18, 192 "created_at": "0001-01-01T00:00:00Z", 193 "updated_at": "0001-01-01T00:00:00Z", 194 "deleted_at": null, 195 "exchange": "binance", 196 "symbol": "XRP/USDT", 197 "left_coin": "XRP", 198 "right_coin": "USDT", 199 "min_unit_amount": 11 200 }, 201 { 202 "id": 19, 203 "created_at": "0001-01-01T00:00:00Z", 204 "updated_at": "0001-01-01T00:00:00Z", 205 "deleted_at": null, 206 "exchange": "binance", 207 "symbol": "LTC/USDT", 208 "left_coin": "LTC", 209 "right_coin": "USDT", 210 "min_unit_amount": 11 211 } 212 ], 213 "message": "success", 214 "status": 10000 215 }
4.刷新页面的时候 不要从 NaN 跳到数字 可以接受从0跳，但是不能接受NaN
this.state = { balance:0 } <Text>{this.state.balance?(this.state.balance / 10000).toFixed(2):'0.00'}</Text>
5.表格已经检验出条件错误，但是 还是提交了表格
解决办法，在把值赋给values.cny_price（Form提交的key）之前 ，判断它的值 ，不符合要求的话就return
6. 点击房间号，获取当前点击的name，id或者其他值（ 我这里只设置了label和roomId值） ====>
RoomList: res.data.map(item => ({
label: item.name,
roomId:item.id
}))
代码：
{RoomList ? RoomList.map((item, index) => (
<div
key={index}
onClick={() => {
this.setState({
checkRoom: index,
roomId:item.roomId // 这里可以获取，但是我用了下面的方法（这种方法不能设置默认值）
}); console.log('看看2') }} style={{ fontSize: 14, color: this.state.checkRoom === index ? '#FD8A00' : '#666', marginRight: (index + 1) % 5 === 0 ? 0 : autoWidth(20), marginBottom: 15, width:'15%' }}> {item.label}号 </div> )) : null}
提交表单
submit = () => { const {data,RoomList,checkRoom} = this.state this.props.history.push({pathname:'/',data:{tab:2,roomName:RoomList[checkRoom].label,name:data.name,describe:data.describe,room_category_id:data.id,roomID:RoomList[checkRoom].roomId}}) };
数据解释 ： checkRoom 设置初始值为0 和index一样，所以默认值就是第一个
RoomList[checkRoom].label 第一个房间名（默认）
RoomList[checkRoom].roomId 第一个房间id （默认）
7.传递数据展示
extra： 由于这个页面没有底部的tabs切换栏，所以页面跳转要先跳到Tabs页面 （带数据）
submit = () => {
const {data,RoomList,checkRoom} = this.state
this.props.history.push({pathname:'/',data:{tab:2,roomName:RoomList[checkRoom].label,name:data.name,describe:data.describe,room_category_id:data.id,roomID:RoomList[checkRoom].roomId}})
};
然后在Tabs页面把数据传给需要跳转的组件（注意，Tabs是多个组件组成的，tab是我设置的状态，传0就是home，以此类推·····）
正题：
this.state = {
roomTypeValue: [this.props.data&&this.props.data.room_category_id] || [],
roomNoValue: [this.props.data&&this.props.data.roomID] || [],
};
注意：由于房间号是从种类中筛选的，所以不能直接展示，需要先获取roomList，
componentDidMount() {
document.title = '预定'
if(this.props.data&&this.props.data.room_category_id){
this.getRoomList(this.props.data.room_category_id)
}
}
getRoomList(id){
HttpUtils.postForm('/api/room/category/room/list', {
id
}).then(res => {
this.setState({
RoomList:res.data.map(item=>({
label:item.name,
value:item.id,
describe:item.describe
}))
})
}).catch(err =>{
Toast.info(err)
})
}
选择器：
<Picker extra={'请选择房间类型'} title={'房间类型'} data={this.state.roomCategoryList} cols={this.state.cols} value={this.state.roomTypeValue} 这个值就是选择器选择的值，也可以当做默认值，在state的时候已经设置了 onPickerChange={this.onPickerChange2} onOk={v => { this.setState({ room_category_id: v.toString(), }) this.getRoomList(v.toString()) }} > <List.Item arrow="horizontal" onClick={this.onClick}>房间种类</List.Item> {/*<span className={'bottom-line'} />*/} </Picker>
表单提交，这里每次提交都会判断，所以应该把选择的房间种类，房间号放在前面，如果他有值，就是你选的，如果没有值，就是从前面页面传过来的
submit = () => { HttpUtils.postForm('/api/subscribe/room', { name: this.state.name, telephone: this.state.mobile, gender: this.state.gender, category: this.state.category, date: moment(this.state.date).format('YYYY-MM-DD'), user_agent: window.navigator.userAgent, start_time: moment(this.state.start_time).format('HH:mm:ss'), end_time: moment(this.state.end_time).format('HH:mm:ss'), start_date: moment(this.state.start_date).format('YYYY-MM-DD'), end_date: moment(this.state.end_date).format('YYYY-MM-DD'), room_id: this.state.room_id || (this.props.data&&this.props.data.roomID) , //每次提交都会判断 room_category_id: this.state.room_category_id || (this.props.data&&this.props.data.room_category_id) , //每次提交都会判断
}).then(res => { if (res.status === 10000) { Toast.success('提交成功 '); } else { Toast.fail(res.message); } }) };
8.从一个页面传递数据，不需要像第6点一样
传很多，只需要传一个id然后再达到的页面里直接获取数据。
9.使用组件传递数据，不需要一个一个的写，直接传 this.state就可以了
<CommonModal visible={this.state.visible} title={'确认信息'} btnText={'返回修改'} data={''}
onOk={this.state.checkType === 1 ? this.submit1 : this.submit2}
onCancel={this.onCancel} placeText={this.state.remark}
confirmInfo={this.state}/>
10.如果同时加载页面 ， 会有 存在this.props.store.App.setUser(res.data)中的数据，读取不到的情况，可以使用定时器来获取
this.timer = setTimeout(() => { this.setState({ genderValue: this.props.store.App.user ? [this.props.store.App.user.gender] : [], mobile: this.props.store.App.user.mobile_phone, name: this.props.store.App.user.name }); }, 1000);
11.如果只找data中的一个对象，那么就用 find函数，不用map ， 用Number 转换字符串为数字
this.timer = setTimeout(() => { this.setState({ genderValue: this.props.store.App.user ? [this.props.store.App.user.gender] : [], mobile: this.props.store.App.user.mobile_phone, name: this.props.store.App.user.name }); }, 1000);
12.自动填充/ 输入 / 选择 只需要一个参数就行了，
name: this.state.name, telephone: this.state.mobile, gender: this.state.genderValue[0],
改class也好改，只需要在state中设置genderValu:“” 为空字符串/空值（length为0），
className={ this.props.store.App.user.gender || this.state.genderValue ? "room-picker" : "" }
13.React 防止多次点击： 设置一个isClick值为true。if(this.state.isClick){ this.setState({isClick:false}) } 当请求有返回数据的时候，再 设置isClick为true。
14.逻辑没有写错，但是textinput框value 值就是不更新
可能需要加个定时器
componentDidMount() {
TokenAction.loadAddresses()
this.tips()
this.listener = DeviceEventEmitter.addListener('changeQRCodeAccount', (e) => {
this.timer = setTimeout(()=>{
this.setState({account: e})
},300)
})
}
