项目框架与代码架构本周浅解

## 一.Router.js中

设置提现

1.index.js 钱包界面

```
<ScrollView showsVerticalScrollIndicator={false}>
<View styles={styles.statistics}>
<ImageBackground
source={require("../../assets/images/yellow_bg.png")}
style={styles.goldImage}
>
<View style={styles.goldTop}>
<View>
<Text style={styles.goldTitle}>医宝值</Text>
<Text style={styles.goldValue}>
{gold_v ? gold_v : 0}
</Text>
</View>
<View style={styles.goldLogTop}>
<TouchableOpacity
style={styles.goldLogBtn}
onPress={() => {
navigate("WithdrawHistory");
}}
>
```
2.screen下Withdraw文件夹
cell文件
Button.js sendCode 定义Button、View实现代码

```
const Button = props => {
const {
text = "按钮",
width = 100,
height = 40,
fontSize = 12,
borderRadius = 3,
color = "#2d8cf0",
hollow = false,
disabled = false,
press
} = props;
```

3.bindAlipay.js 处理支付宝绑定

```
import React, { useState, useRef } from "react";
import { View, TextInput, StyleSheet } from "react-native";
import { Screen, Header } from "components";
import { Button } from "./cell/Button";
import SendCode from "./cell/sendCode";
import { Device, back, Colors } from "utils";
import { GQL, compose, graphql } from "apollo";
const btn = {
text: "保存",
width: Device.width * 0.88,
color: Colors.themeColor
};
// const resendBtn = {
// text: '重新发送',
// color: '#6c97ff',
// height: 30
// };
const parama = {
title: "支付宝信息",
remindInfo:
"支付宝账号及真实姓名为提现有效证据,请输入已经通过实名认证的支付宝账号,否则提现将失败"
};

const Input = props => {
const { placeholder, get, defaultValue } = props;
const [, setValue] = useState();
return (
<TextInput
defaultValue={defaultValue}
placeholder={placeholder}
maxLength={20}
style={{ height: 45 }}
onChangeText={v => {
setValue(v);
get(v);
}}
/>
);
};
const BindAlipay = props => {
let receive = "";
if (props.navigation.state.params !== undefined)
receive = props.navigation.state.params;
const real_name = useRef(receive === "" ? "" : receive.real_name);
const pay_account = useRef(receive === "" ? "" : receive.pay_account);
const [disabled, setDisabled] = useState(true);
const inspect = () => {
if (real_name.current === "" || pay_account.current === "") {
setDisabled(true);
} else {
if (
receive &&
real_name.current === receive.real_name &&
pay_account.current === receive.pay_account
) {
setDisabled(true);
} else {
setDisabled(false);
}
}
};
const next = async () => {
let res;
try {
res = await props.setWalletPaymentInfo({
variables: {
input: {
real_name: real_name.current,
pay_account: pay_account.current
}
},
refetchQueries: result => [
{
query: GQL.userWithdrawQuery
}
],
errorPolicy: "all"
});
} catch (error) {
res.errors = error;
}
if (res.hasOwnProperty("errors")) {
Toast.show({
content: res.errors[0].message
});
} else {
Toast.show({
content: "绑定成功"
});
setTimeout(() => back(), 500);
}
};

// if (res.setWalletPaymentInfo.id) {
// back();
// }
// useInterval(() => {}
// setCount(count - 1);
// }, 1000);
return (
<Screen header>
<Header routeName={"验证"} />
<SendCode {...parama} />
<View style={styles.container}>
<Input
placeholder="请输入姓名"
defaultValue={real_name.current}
get={v => {
real_name.current = v;
inspect();
}}
/>
<Input
placeholder="请输入支付宝账号"
defaultValue={pay_account.current}
get={v => {
pay_account.current = v;
inspect();
}}
/>
<Button
{...btn}
disabled={disabled}
press={() => next()}
custom={{
marginTop: 30,
marginBottom: 20
}}
/>
{/* {count < 1 ? (
<Button {...resendBtn} press={() => setCount(5)} />
) : (
<Text style={{ margin: 5, color: 'gray', fontSize: 12 }}>{count}s后重新发送</Text>
)} */}
</View>
</Screen>
);
};
const styles = StyleSheet.create({
container: {
width: Device.width * 0.94,
paddingLeft: Device.width * 0.06
},
remind: {
fontSize: 10,
color: "gray",
paddingVertical: 10
}
});
export default compose(
graphql(GQL.setWalletPaymentInfoMutation, { name: "setWalletPaymentInfo" })
)(BindAlipay);

```
4.verifyAccount.js 支付宝验证码逻辑

```
const btn = {
text: '确认发送验证码',
width: Device.width * 0.88,
color: '#6c97ff'
};
const parama = {
title: '验证账号',
remindInfo: '绑定支付宝信息需要验证账号的安全性'
};
const VerifyAccount = props => {
const { phoneNumber = 15115438096 } = props;
const next = () => {
navigate('BindAlipay');
};
return (
<Screen header>
<Header routeName={'账户绑定'} />
<SendCode {...parama}>
<Text
style={{
fontSize: 12,
color: 'gray',
paddingTop: 10,
marginBottom: 40
}}
>
验证码将发送至账号{phoneNumber}
</Text>
<Button {...btn} press={() => next()} />
</SendCode>
</Screen>
);
};

```
5.Router.js
WithdrawApplyScreen的路径
```
import WithdrawApplyScreen from "../screens/withdraw/WithdrawApply";
import {
Withdraw,
WithdrawDetail,
VerifyAccount,
BindAlipay,
WithdrawHistory
} from "screen";
```
WithdrawApply.js 提现成功代码
```
import React, { Component } from 'react';
import { View, StyleSheet, Image, Text } from 'react-native';

import { Screen, Header, Button } from 'components';
import { width, height, Colors, back } from 'utils';

class WithdrawApply extends Component { //继承Component
constructor(props) {
super(props);
}
render() {
return (
<Screen header styles={styles.container}> //定义header样式
<Header routeName={'提现'} />

<View style={{ flex: 1, alignItems: 'center', padding: 20 }}>
<Image
style={{ margin: 30 }} //图片样式与路径
source={require('../../assets/images/money.png')}
/>
<Text style={{ color: Colors.themeColor, fontSize: 18, margin: 15 }}>
申请提现成功！ //设置成功后的text
</Text>
<View style={{}}>
<Text>提现申请已提交，请等待处理</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
margin: 10
}}
>
<Text style={{ color: '#999' }}>
{this.props.navigation.state.params.created_at
? this.props.navigation.state.params.created_at
: new Date().toLocaleString()}
</Text>
</View>

<Text style={{ color: '#999' }}>预计到账时间： 3~5 个工作日内</Text>
</View>
<View style={{ height: 40, marginTop: 20 }}>
<Button
name="完成"
style={{ width: 220, paddingHorizontal: 20 }}
handler={() => {
back();
}}
/>
</View>
</View>
</Screen>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});

```

6.screen下parts文件夹
item.js 做出提现成功与失败的逻辑处理

```
return (
<TouchableOpacity style={styles.container} onPress={() => navigate('WithdrawDetail', { item: props.item })}>
<View style={styles.vCenter}>
<Text style={{ fontSize: 12 }}>{status === -1 ? '提现失败' : status ? '提现成功' : '待处理'}</Text>
<Text style={styles.grayText}>{time_ago}</Text>
</View>
<Text style={{ fontSize: 15, color: color }}>¥{amount}</Text>
</TouchableOpacity>
);
};

```
相应的医保数额样式

```
return (
<View style={styles.container}>
<View style={styles.vCenter}>
<Text style={{ fontSize: 12 }}>{remark.indexOf('>') !== -1 ? remark.split('>')[1] : remark}</Text>
<Text style={styles.grayText}>{time_ago}</Text>
</View>
<View style={[styles.vCenter, { alignItems: 'flex-end' }]}>
<Text style={{ fontSize: 13, color: color }}>{gold}</Text>
<Text style={styles.grayText}> 剩余医宝: ¥{balance}</Text>
</View>
</View>
);
};
```
在MutiStyle中导出 在item.js中使用

```
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
top_bottom_line: {
borderBottomColor: '#F2F2F4',
borderTopColor: '#F2F2F4',
borderBottomWidth: 1,
borderTopWidth: 1
}
});

```
7.history.js查看账单

```
<Screen header>
<Header routeName={'我的账单'} />
<ScrollableTabView
renderTabBar={() => (
<CustomTabBar
backgroundColor={'white'}
tabUnderlineDefaultWidth={30} // default containerWidth / (numberOfTabs * 4)
tabUnderlineScaleX={3} // default 3
activeColor={'#0af'}
inactiveColor={'#333'}
/>
)}
>

export default WithdrawApply;

```

8.detail.js中具体到账

```
return (
<>
<Info status={status} amount={amount} />
<List name='提现单号' item={transaction_id} />
<List name='转账备注' item='医宝提现' />
<List name='收款账户' item={to_account} />
<List name='到账时间' item={Tools.getDateDiff(created_at)} />
<List name='支付宝订单号' item={trade_no} />
<View style={{ padding: 20 }}>
<Text style={styles.grayText}>回执信息</Text>
<Text style={{ margin: 10 }}>{remark}</Text>
</View>
</>
);
}}
```

 

转载于:https://www.cnblogs.com/rsheng/p/11474741.html