Skip to content

B
bh_face_counter
Commit 257de33b by 修福龙
Options

适配马里奥设备

parent f0555f99
Showing with 269 additions and 255 deletions
src/components/HomeLayout.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Image, Text, View} from 'react-native'; import {Image, Text, View} from 'react-native';
import {appName} from '../utils/config'; import {appName} from '../utils/config';
import {setSpText, scaleSize} from '../utils/screen';
class HomeLayout extends Component { class HomeLayout extends Component {
render() { render() {
return ( return (
...@@ -12,7 +14,7 @@ class HomeLayout extends Component { ...@@ -12,7 +14,7 @@ class HomeLayout extends Component {
resizeMode="contain" resizeMode="contain"
/> />
<Image <Image
style={{marginLeft: 20}} style={{marginLeft: scaleSize(40)}}
source={require('../assets/Vertical/24h.png')} source={require('../assets/Vertical/24h.png')}
/> />
<Text style={styles.titleText}>{appName}</Text> <Text style={styles.titleText}>{appName}</Text>
...@@ -25,9 +27,9 @@ class HomeLayout extends Component { ...@@ -25,9 +27,9 @@ class HomeLayout extends Component {
const styles = { const styles = {
title: { title: {
top: 0, top: 0,
paddingLeft: 30, paddingLeft: scaleSize(50),
flexDirection: 'row', flexDirection: 'row',
height: 100, height: scaleSize(220),
width: '100%', width: '100%',
position: 'absolute', position: 'absolute',
backgroundColor: 'white', backgroundColor: 'white',
...@@ -35,12 +37,12 @@ const styles = { ...@@ -35,12 +37,12 @@ const styles = {
elevation: 10, elevation: 10,
}, },
titleImg: { titleImg: {
width: 80, width: scaleSize(150),
height: 80, height: scaleSize(150),
}, },
titleText: { titleText: {
color: '#333', color: '#333',
fontSize: 40, fontSize: setSpText(60),
marginLeft: 30, marginLeft: 30,
}, },
container: { container: {
......
src/components/OrderDetailsModal.js
...@@ -7,7 +7,7 @@ import {font} from '../utils/common'; ...@@ -7,7 +7,7 @@ import {font} from '../utils/common';
import Touch from './Touch'; import Touch from './Touch';
import NP from '../utils/np'; import NP from '../utils/np';
import phone from '../assets/Vertical/phone.png'; import phone from '../assets/Vertical/phone.png';
import {width} from '../utils/screen'; import {setSpText, scaleSize, scaleHeight} from '../utils/screen';
let pageSize = 6; // 分页大小 let pageSize = 6; // 分页大小
...@@ -22,57 +22,6 @@ const mStyles = { ...@@ -22,57 +22,6 @@ const mStyles = {
}, },
}; };
// const goodsArr = [
// {
// name: '百事可乐',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// ];
class OrderDetailsModal extends Component { class OrderDetailsModal extends Component {
state = { state = {
conatct: '', conatct: '',
...@@ -223,7 +172,7 @@ class OrderDetailsModal extends Component { ...@@ -223,7 +172,7 @@ class OrderDetailsModal extends Component {
<Icon <Icon
name="md-close" name="md-close"
color={'#FFFFFF'} color={'#FFFFFF'}
size={width > 471 ? 50 : 35} size={scaleSize(90)}
/> />
</Touch> </Touch>
<Text style={styles.text}>{contact}</Text> <Text style={styles.text}>{contact}</Text>
...@@ -404,20 +353,17 @@ const styles = { ...@@ -404,20 +353,17 @@ const styles = {
}, },
header: { header: {
flex: 0.2, flex: 0.2,
// backgroundColor: '#00CD66',
backgroundColor: 'rgb(0,205,102)', backgroundColor: 'rgb(0,205,102)',
width: '100%', width: '100%',
flexDirection: 'column', flexDirection: 'column',
// borderTopRightRadius: 10,
// // borderTopLeftRadius: 10,
}, },
title: { title: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
marginLeft: width > 471 ? 30 : 15, marginLeft: scaleSize(20),
marginRight: width > 471 ? 30 : 15, marginRight: scaleSize(20),
marginTop: width > 471 ? 10 : 5, marginTop: scaleSize(10),
marginBottom: width > 471 ? 10 : 5, marginBottom: scaleSize(10),
}, },
left: { left: {
flexDirection: 'row', flexDirection: 'row',
...@@ -428,20 +374,20 @@ const styles = { ...@@ -428,20 +374,20 @@ const styles = {
alignItems: 'center', alignItems: 'center',
}, },
img: { img: {
width: width > 471 ? 60 : 40, width: scaleSize(90),
height: width > 471 ? 60 : 40, height: scaleSize(90),
marginRight: width > 471 ? 10 : 8, marginRight: scaleSize(20),
resizeMode: 'contain', resizeMode: 'contain',
}, },
text: { text: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: width > 471 ? 35 : 28, fontSize: setSpText(63),
marginRight: width > 471 ? 30 : 24, marginRight: scaleSize(20),
}, },
phone: { phone: {
width: width > 471 ? 40 : 30, width: scaleSize(70),
height: width > 471 ? 40 : 30, height: scaleSize(70),
marginRight: width > 471 ? 10 : 5, marginRight: scaleSize(15),
resizeMode: 'contain', resizeMode: 'contain',
}, },
headline: { headline: {
...@@ -451,7 +397,7 @@ const styles = { ...@@ -451,7 +397,7 @@ const styles = {
flex: 1, flex: 1,
}, },
headTitle: { headTitle: {
fontSize: width > 471 ? 60 : 48, fontSize: setSpText(100),
color: '#fff', color: '#fff',
}, },
customerPhone: { customerPhone: {
...@@ -462,14 +408,14 @@ const styles = { ...@@ -462,14 +408,14 @@ const styles = {
marginLeft: '5%', marginLeft: '5%',
marginRight: '5%', marginRight: '5%',
marginBottom: '2%', marginBottom: '2%',
paddingTop: width > 471 ? 10 : 8, paddingTop: scaleHeight(10),
paddingBottom: width > 471 ? 10 : 8, paddingBottom: scaleHeight(10),
elevation: 3, elevation: 3,
}, },
number: { number: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: width > 471 ? 30 : 24, fontSize: setSpText(65),
marginRight: width > 471 ? 30 : 24, marginRight: scaleSize(20),
}, },
container: { container: {
flex: 0.6, flex: 0.6,
...@@ -489,19 +435,19 @@ const styles = { ...@@ -489,19 +435,19 @@ const styles = {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
margin: width > 471 ? 10 : 8, margin: scaleSize(5),
}, },
empty: { empty: {
flexDirection: 'row', flexDirection: 'row',
margin: width > 471 ? 10 : 8, margin: scaleSize(5),
}, },
emptyImg: { emptyImg: {
width: 400, width: scaleSize(800),
height: 400, height: scaleSize(900),
resizeMode: 'contain', resizeMode: 'contain',
}, },
tips: { tips: {
fontSize: width > 471 ? 30 : 20, fontSize: setSpText(45),
// color: '#8B8989', // color: '#8B8989',
color: 'red', color: 'red',
}, },
...@@ -511,37 +457,37 @@ const styles = { ...@@ -511,37 +457,37 @@ const styles = {
pagination: { pagination: {
flex: 1, flex: 1,
backgroundColor: '#fff', backgroundColor: '#fff',
marginTop: '12%', marginTop: '8%',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', // justifyContent: 'center',
}, },
paginationText: { paginationText: {
fontSize: width > 471 ? 40 : 32, fontSize: setSpText(60),
}, },
imgPagination: { imgPagination: {
width: width > 471 ? 50 : 40, width: scaleSize(90),
height: width > 471 ? 50 : 40, height: scaleSize(90),
}, },
firstThStyle: { firstThStyle: {
width: '40%', width: '40%',
alignItems: 'flex-start', alignItems: 'flex-start',
paddingTop: width > 471 ? 14 : 10, paddingTop: scaleSize(14),
paddingBottom: width > 471 ? 14 : 10, paddingBottom: scaleSize(14),
paddingLeft: width > 471 ? 10 : 8, paddingLeft: scaleSize(8),
paddingRight: width > 471 ? 10 : 8, paddingRight: scaleSize(8),
marginLeft: '10%', marginLeft: '10%',
}, },
ThStyle: { ThStyle: {
width: '20%', width: '20%',
alignItems: 'center', alignItems: 'center',
paddingTop: width > 471 ? 14 : 10, paddingTop: scaleSize(14),
paddingBottom: width > 471 ? 14 : 10, paddingBottom: scaleSize(14),
paddingLeft: width > 471 ? 10 : 8, paddingLeft: scaleSize(8),
paddingRight: width > 471 ? 10 : 8, paddingRight: scaleSize(8),
}, },
ThText: { ThText: {
fontSize: width > 471 ? 30 : 20, fontSize: setSpText(55),
}, },
oddCell: { oddCell: {
flexDirection: 'row', flexDirection: 'row',
...@@ -555,10 +501,10 @@ const styles = { ...@@ -555,10 +501,10 @@ const styles = {
width: '40%', width: '40%',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'flex-start', alignItems: 'flex-start',
paddingTop: width > 471 ? 14 : 10, paddingTop: scaleSize(14),
paddingBottom: width > 471 ? 14 : 10, paddingBottom: scaleSize(14),
paddingLeft: width > 471 ? 10 : 8, paddingLeft: scaleSize(8),
paddingRight: width > 471 ? 10 : 8, paddingRight: scaleSize(8),
marginLeft: '5%', marginLeft: '5%',
}, },
TdStyle: { TdStyle: {
...@@ -566,34 +512,32 @@ const styles = { ...@@ -566,34 +512,32 @@ const styles = {
width: '20%', width: '20%',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
paddingTop: width > 471 ? 14 : 10, paddingTop: scaleSize(14),
paddingBottom: width > 471 ? 14 : 10, paddingBottom: scaleSize(14),
paddingLeft: width > 471 ? 10 : 8, paddingLeft: scaleSize(8),
paddingRight: width > 471 ? 10 : 8, paddingRight: scaleSize(8),
}, },
TdText: { TdText: {
fontSize: width > 471 ? 20 : 16, fontSize: setSpText(45),
}, },
amount: { amount: {
flexDirection: 'column', flexDirection: 'column',
height: width > 471 ? '25%' : '22%', height: '23%',
backgroundColor: '#FFF', backgroundColor: '#FFF',
marginLeft: '2%', marginLeft: '5%',
marginRight: '2%', marginRight: '10%',
}, },
total: { total: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
marginLeft: width > 471 ? 30 : 20, marginTop: scaleSize(5),
marginRight: width > 471 ? 30 : 20,
marginTop: width > 471 ? 15 : 8,
}, },
totalText: { totalText: {
fontSize: width > 471 ? 30 : 20, fontSize: setSpText(55),
}, },
discount: { discount: {
fontSize: width > 471 ? 30 : 20, fontSize: setSpText(60),
color: 'red', color: 'red',
}, },
line: { line: {
...@@ -604,10 +548,10 @@ const styles = { ...@@ -604,10 +548,10 @@ const styles = {
}, },
realPay: { realPay: {
flexDirection: 'column', flexDirection: 'column',
height: width > 471 ? '16%' : '14%', height: '14%',
backgroundColor: '#FFF', backgroundColor: '#FFF',
marginLeft: '2%', marginLeft: '5%',
marginRight: '2%', marginRight: '10%',
}, },
footer: { footer: {
flex: 0.2, flex: 0.2,
...@@ -622,14 +566,13 @@ const styles = { ...@@ -622,14 +566,13 @@ const styles = {
alignItems: 'center', alignItems: 'center',
}, },
callGif: { callGif: {
width: width > 471 ? 350 : 240, width: scaleSize(500),
height: width > 471 ? 240 : 150, height: scaleSize(320),
marginLeft: width > 471 ? -120 : -96, marginLeft: scaleSize(-240),
}, },
callText: { callText: {
fontSize: width > 471 ? 70 : 56, fontSize: setSpText(150),
color: '#fff', color: '#fff',
marginLeft: width > 471 ? -50 : -40,
}, },
onCall: { onCall: {
flex: 0.2, flex: 0.2,
...@@ -641,9 +584,9 @@ const styles = { ...@@ -641,9 +584,9 @@ const styles = {
alignItems: 'center', alignItems: 'center',
}, },
onCallText: { onCallText: {
fontSize: width > 471 ? 70 : 40, fontSize: setSpText(85),
color: '#fff', color: '#fff',
marginLeft: width > 471 ? -70 : -56, marginLeft: scaleSize(-100),
}, },
}; };
......
src/components/PhoneModal.js
...@@ -6,7 +6,7 @@ import ModalStyles from './Modal/styles'; ...@@ -6,7 +6,7 @@ import ModalStyles from './Modal/styles';
import {colors, font} from '../utils/common'; import {colors, font} from '../utils/common';
import Touch from './Touch'; import Touch from './Touch';
import phone from '../assets/Vertical/phone.png'; import phone from '../assets/Vertical/phone.png';
import {width} from '../utils/screen'; import {setSpText, scaleSize} from '../utils/screen';
const mStyles = { const mStyles = {
...ModalStyles, ...ModalStyles,
...@@ -116,8 +116,8 @@ class PhoneModal extends Component { ...@@ -116,8 +116,8 @@ class PhoneModal extends Component {
<Text <Text
style={{ style={{
color: 'red', color: 'red',
fontSize: width > 471 ? 45 : 32, fontSize: setSpText(70),
marginBottom: width > 471 ? 10 : 8, marginBottom: scaleSize(10),
}}> }}>
请输入接收验证码的手机号 请输入接收验证码的手机号
</Text> </Text>
...@@ -129,10 +129,10 @@ class PhoneModal extends Component { ...@@ -129,10 +129,10 @@ class PhoneModal extends Component {
}}> }}>
<TextInput <TextInput
style={{ style={{
fontSize: 35, fontSize: setSpText(90),
width: '80%', width: '80%',
textAlign: 'center', textAlign: 'center',
padding: width > 471 ? 30 : 20, padding: scaleSize(20),
color: '#000', color: '#000',
}} }}
placeholder="安全输入不留痕迹" placeholder="安全输入不留痕迹"
...@@ -143,7 +143,11 @@ class PhoneModal extends Component { ...@@ -143,7 +143,11 @@ class PhoneModal extends Component {
<Touch <Touch
onPress={() => this.setState({value: ''})} onPress={() => this.setState({value: ''})}
feddback={false}> feddback={false}>
<Icon name="md-close" color={'#DCDCDC'} size={50} /> <Icon
name="md-close"
color={'#DCDCDC'}
size={scaleSize(120)}
/>
</Touch> </Touch>
</View> </View>
</View> </View>
...@@ -166,7 +170,7 @@ class PhoneModal extends Component { ...@@ -166,7 +170,7 @@ class PhoneModal extends Component {
<MIcon <MIcon
style={styles.keyUnit} style={styles.keyUnit}
name="backspace-outline" name="backspace-outline"
size={60} size={scaleSize(10)}
/> />
</Touch> </Touch>
</View> </View>
...@@ -222,9 +226,9 @@ const styles = { ...@@ -222,9 +226,9 @@ const styles = {
title: { title: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
marginLeft: width > 471 ? 30 : 24, marginLeft: scaleSize(20),
marginRight: width > 471 ? 30 : 24, marginRight: scaleSize(20),
marginTop: width > 471 ? 10 : 5, marginTop: scaleSize(5),
}, },
left: { left: {
flexDirection: 'row', flexDirection: 'row',
...@@ -233,18 +237,18 @@ const styles = { ...@@ -233,18 +237,18 @@ const styles = {
right: { right: {
flexDirection: 'row-reverse', flexDirection: 'row-reverse',
alignItems: 'center', alignItems: 'center',
marginTop: width > 471 ? 15 : 12, marginTop: scaleSize(20),
}, },
img: { img: {
width: width > 471 ? 80 : 60, width: scaleSize(120),
height: width > 471 ? 80 : 60, height: scaleSize(120),
marginRight: width > 471 ? 10 : 5, marginRight: scaleSize(10),
resizeMode: 'contain', resizeMode: 'contain',
}, },
phone: { phone: {
width: width > 471 ? 40 : 30, width: scaleSize(60),
height: width > 471 ? 40 : 30, height: scaleSize(60),
marginRight: width > 471 ? 10 : 8, marginRight: scaleSize(10),
resizeMode: 'contain', resizeMode: 'contain',
}, },
image: { image: {
...@@ -254,13 +258,13 @@ const styles = { ...@@ -254,13 +258,13 @@ const styles = {
alignItems: 'center', alignItems: 'center',
}, },
logo: { logo: {
width: width > 471 ? 150 : 120, width: scaleSize(320),
height: width > 471 ? 150 : 120, height: scaleSize(320),
resizeMode: 'contain', resizeMode: 'contain',
}, },
text: { text: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: width > 471 ? 30 : 25, fontSize: setSpText(65),
}, },
container: { container: {
flex: 0.2, flex: 0.2,
...@@ -290,19 +294,19 @@ const styles = { ...@@ -290,19 +294,19 @@ const styles = {
keyRow: { keyRow: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginTop: 10, marginTop: scaleSize(25),
marginLeft: 20, marginLeft: scaleSize(50),
marginRight: 10, marginRight: scaleSize(25),
flex: 0.33, flex: 0.33,
}, },
keyRowBottom: { keyRowBottom: {
width: '100%', width: '100%',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginTop: 10, marginTop: scaleSize(25),
marginLeft: 20, marginLeft: scaleSize(50),
marginRight: 10, marginRight: scaleSize(25),
marginBottom: 10, marginBottom: scaleSize(25),
flex: 0.2, flex: 0.2,
}, },
keyBottomTouch: { keyBottomTouch: {
...@@ -322,7 +326,7 @@ const styles = { ...@@ -322,7 +326,7 @@ const styles = {
marginHorizontal: 5, marginHorizontal: 5,
}, },
keyUnit: { keyUnit: {
fontSize: 50, fontSize: setSpText(100),
color: colors.text, color: colors.text,
}, },
footerRight: { footerRight: {
...@@ -334,10 +338,10 @@ const styles = { ...@@ -334,10 +338,10 @@ const styles = {
keyRowClose: { keyRowClose: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginLeft: 10, marginTop: scaleSize(25),
marginTop: 10, marginLeft: scaleSize(45),
marginRight: 5, marginRight: scaleSize(15),
flex: 0.25, flex: 0.22,
}, },
keyTouchClose: { keyTouchClose: {
width: '90%', width: '90%',
...@@ -350,11 +354,11 @@ const styles = { ...@@ -350,11 +354,11 @@ const styles = {
keyRowSure: { keyRowSure: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginLeft: 10, marginTop: scaleSize(25),
marginTop: 10, marginLeft: scaleSize(45),
marginBottom: 10, marginRight: scaleSize(15),
marginRight: 5, marginBottom: scaleSize(25),
flex: 0.75, flex: 0.78,
}, },
keyTouchSure: { keyTouchSure: {
width: '90%', width: '90%',
...@@ -373,7 +377,7 @@ const styles = { ...@@ -373,7 +377,7 @@ const styles = {
marginHorizontal: 5, marginHorizontal: 5,
}, },
keyUnitClose: { keyUnitClose: {
fontSize: width > 471 ? 50 : 40, fontSize: setSpText(85),
color: '#FFFFFF', color: '#FFFFFF',
}, },
}; };
......
src/components/Placeholder.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import {View, Image, Text} from 'react-native'; import {View, Image, Text} from 'react-native';
import HomeLayout from './HomeLayout'; import HomeLayout from './HomeLayout';
import {setSpText, scaleSize} from '../utils/screen';
class Placeholder extends Component { class Placeholder extends Component {
render() { render() {
...@@ -22,9 +23,12 @@ const styles = { ...@@ -22,9 +23,12 @@ const styles = {
alignItems: 'center', alignItems: 'center',
background: 'white', background: 'white',
}, },
img: {
width: '100%',
},
text: { text: {
fontSize: 30, fontSize: setSpText(60),
marginTop: 20, marginTop: scaleSize(20),
color: 'gray', color: 'gray',
}, },
}; };
......
src/components/VerifyCodeModal.js
...@@ -6,7 +6,7 @@ import ModalStyles from './Modal/styles'; ...@@ -6,7 +6,7 @@ import ModalStyles from './Modal/styles';
import {colors, font} from '../utils/common'; import {colors, font} from '../utils/common';
import Touch from './Touch'; import Touch from './Touch';
import phone from '../assets/Vertical/phone.png'; import phone from '../assets/Vertical/phone.png';
import {width} from '../utils/screen'; import {setSpText, scaleSize} from '../utils/screen';
const mStyles = { const mStyles = {
...ModalStyles, ...ModalStyles,
...@@ -210,9 +210,9 @@ const styles = { ...@@ -210,9 +210,9 @@ const styles = {
title: { title: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
marginLeft: width > 471 ? 30 : 24, marginLeft: scaleSize(20),
marginRight: width > 471 ? 30 : 24, marginRight: scaleSize(20),
marginTop: width > 471 ? 10 : 8, marginTop: scaleSize(5),
}, },
left: { left: {
flexDirection: 'row', flexDirection: 'row',
...@@ -221,18 +221,18 @@ const styles = { ...@@ -221,18 +221,18 @@ const styles = {
right: { right: {
flexDirection: 'row-reverse', flexDirection: 'row-reverse',
alignItems: 'center', alignItems: 'center',
marginTop: width > 471 ? 15 : 12, marginTop: scaleSize(20),
}, },
img: { img: {
width: width > 471 ? 80 : 60, width: scaleSize(120),
height: width > 471 ? 80 : 60, height: scaleSize(120),
marginRight: width > 471 ? 10 : 5, marginRight: scaleSize(10),
resizeMode: 'contain', resizeMode: 'contain',
}, },
phone: { phone: {
width: width > 471 ? 40 : 30, width: scaleSize(60),
height: width > 471 ? 40 : 30, height: scaleSize(60),
marginRight: width > 471 ? 10 : 8, marginRight: scaleSize(10),
resizeMode: 'contain', resizeMode: 'contain',
}, },
image: { image: {
...@@ -242,13 +242,13 @@ const styles = { ...@@ -242,13 +242,13 @@ const styles = {
alignItems: 'center', alignItems: 'center',
}, },
logo: { logo: {
width: width > 471 ? 150 : 120, width: scaleSize(320),
height: width > 471 ? 150 : 120, height: scaleSize(320),
resizeMode: 'contain', resizeMode: 'contain',
}, },
text: { text: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: width > 471 ? 30 : 25, fontSize: setSpText(65),
}, },
container: { container: {
flex: 0.3, flex: 0.3,
...@@ -259,8 +259,8 @@ const styles = { ...@@ -259,8 +259,8 @@ const styles = {
}, },
tips: { tips: {
color: 'red', color: 'red',
fontSize: width > 471 ? 45 : 32, fontSize: setSpText(90),
marginBottom: width > 471 ? 10 : 8, marginBottom: scaleSize(10),
textAlign: 'center', textAlign: 'center',
}, },
codeView: { codeView: {
...@@ -268,15 +268,15 @@ const styles = { ...@@ -268,15 +268,15 @@ const styles = {
justifyContent: 'space-around', justifyContent: 'space-around',
alignItems: 'center', alignItems: 'center',
flex: 0.5, flex: 0.5,
marginTop: width > 471 ? 30 : 24, marginTop: scaleSize(30),
}, },
code: { code: {
height: '100%', height: '100%',
width: '15%', width: '15%',
borderWidth: 4, borderWidth: scaleSize(8),
borderColor: '#DCDCDC', borderColor: '#DCDCDC',
textAlign: 'center', textAlign: 'center',
fontSize: 50, fontSize: setSpText(120),
textAlignVertical: 'center', textAlignVertical: 'center',
}, },
footer: { footer: {
...@@ -299,19 +299,19 @@ const styles = { ...@@ -299,19 +299,19 @@ const styles = {
keyRow: { keyRow: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginTop: 10, marginTop: scaleSize(25),
marginLeft: 20, marginLeft: scaleSize(50),
marginRight: 10, marginRight: scaleSize(25),
flex: 0.33, flex: 0.33,
}, },
keyRowBottom: { keyRowBottom: {
width: '100%', width: '100%',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginTop: 10, marginTop: scaleSize(25),
marginLeft: 20, marginLeft: scaleSize(50),
marginRight: 10, marginRight: scaleSize(25),
marginBottom: 10, marginBottom: scaleSize(25),
flex: 0.2, flex: 0.2,
}, },
keyBottomTouch: { keyBottomTouch: {
...@@ -331,7 +331,7 @@ const styles = { ...@@ -331,7 +331,7 @@ const styles = {
marginHorizontal: 5, marginHorizontal: 5,
}, },
keyUnit: { keyUnit: {
fontSize: 50, fontSize: setSpText(100),
color: colors.text, color: colors.text,
}, },
footerRight: { footerRight: {
...@@ -343,10 +343,10 @@ const styles = { ...@@ -343,10 +343,10 @@ const styles = {
keyRowClose: { keyRowClose: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginLeft: 10, marginTop: scaleSize(25),
marginTop: 10, marginLeft: scaleSize(45),
marginRight: 5, marginRight: scaleSize(15),
flex: 0.25, flex: 0.22,
}, },
keyTouchClose: { keyTouchClose: {
width: '90%', width: '90%',
...@@ -359,11 +359,11 @@ const styles = { ...@@ -359,11 +359,11 @@ const styles = {
keyRowSure: { keyRowSure: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginLeft: 10, marginTop: scaleSize(25),
marginTop: 10, marginLeft: scaleSize(45),
marginBottom: 10, marginRight: scaleSize(15),
marginRight: 5, marginBottom: scaleSize(25),
flex: 0.75, flex: 0.78,
}, },
keyTouchSure: { keyTouchSure: {
width: '90%', width: '90%',
...@@ -382,7 +382,7 @@ const styles = { ...@@ -382,7 +382,7 @@ const styles = {
marginHorizontal: 5, marginHorizontal: 5,
}, },
keyUnitClose: { keyUnitClose: {
fontSize: width > 471 ? 50 : 40, fontSize: setSpText(85),
color: '#FFFFFF', color: '#FFFFFF',
}, },
}; };
......
src/pages/AuthPage.js
...@@ -6,6 +6,7 @@ import axios from 'axios'; ...@@ -6,6 +6,7 @@ import axios from 'axios';
import {counterLogin} from '../utils/authLogin'; import {counterLogin} from '../utils/authLogin';
import config from '../utils/config'; import config from '../utils/config';
import HomeLayout from '../components/HomeLayout'; import HomeLayout from '../components/HomeLayout';
import {setSpText, scaleSize} from '../utils/screen';
class AuthPage extends Component { class AuthPage extends Component {
state = {}; state = {};
...@@ -33,7 +34,7 @@ class AuthPage extends Component { ...@@ -33,7 +34,7 @@ class AuthPage extends Component {
<HomeLayout> <HomeLayout>
<View style={styles.qrcode}> <View style={styles.qrcode}>
<QRCode <QRCode
size={350} size={scaleSize(700)}
logo={require('../assets/logo.png')} logo={require('../assets/logo.png')}
logoBackgroundColor="#FC4000" logoBackgroundColor="#FC4000"
backgroundColor="white" backgroundColor="white"
...@@ -47,7 +48,7 @@ class AuthPage extends Component { ...@@ -47,7 +48,7 @@ class AuthPage extends Component {
const styles = { const styles = {
qrcode: { qrcode: {
padding: 10, padding: setSpText(10),
backgroundColor: 'white', backgroundColor: 'white',
elevation: 5, elevation: 5,
}, },
......
src/pages/FacePage.js
...@@ -15,9 +15,7 @@ import phone from '../assets/Vertical/phone.png'; ...@@ -15,9 +15,7 @@ import phone from '../assets/Vertical/phone.png';
import {onTalkCall, leaveTalkCall} from '../utils/agora'; import {onTalkCall, leaveTalkCall} from '../utils/agora';
import Toast from '../components/Toast'; import Toast from '../components/Toast';
import Screensaver from '../components/Screensaver'; import Screensaver from '../components/Screensaver';
import {width} from '../utils/screen'; import {width, setSpText, scaleSize, scaleHeight} from '../utils/screen';
// const {width} = Dimensions.get('screen');
class FacePage extends Component { class FacePage extends Component {
state = { state = {
...@@ -33,7 +31,7 @@ class FacePage extends Component { ...@@ -33,7 +31,7 @@ class FacePage extends Component {
tip: '', tip: '',
tipsModal: false, tipsModal: false,
faceType: 'wxpay', faceType: 'wxpay',
sleep: true, sleep: false,
}; };
async componentWillMount() { async componentWillMount() {
...@@ -395,7 +393,8 @@ class FacePage extends Component { ...@@ -395,7 +393,8 @@ class FacePage extends Component {
clearTimeout(this.wakeUpTimeout); clearTimeout(this.wakeUpTimeout);
this.wakeUpTimeout = setTimeout(() => { this.wakeUpTimeout = setTimeout(() => {
this.setState({sleep: true}); this.setState({sleep: true});
}, 18888); }, 1000 * 60 * 60);
// }, 18888);
}; };
render() { render() {
...@@ -587,19 +586,19 @@ const styles = { ...@@ -587,19 +586,19 @@ const styles = {
title: { title: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
marginLeft: width > 471 ? 30 : 15, marginLeft: scaleSize(30),
marginRight: width > 471 ? 30 : 15, marginRight: scaleSize(30),
marginTop: width > 471 ? 10 : 8, marginTop: scaleSize(10),
}, },
headline: { headline: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
flex: 1, flex: 1,
marginBottom: width > 471 ? 20 : 16, marginBottom: scaleSize(20),
}, },
headTitle: { headTitle: {
fontSize: width > 471 ? 60 : 48, fontSize: setSpText(100),
color: '#fff', color: '#fff',
}, },
left: { left: {
...@@ -611,19 +610,19 @@ const styles = { ...@@ -611,19 +610,19 @@ const styles = {
alignItems: 'center', alignItems: 'center',
}, },
img: { img: {
width: width > 471 ? 60 : 48, width: scaleSize(90),
height: width > 471 ? 60 : 48, height: scaleSize(90),
marginRight: width > 471 ? 10 : 8, marginRight: scaleSize(20),
resizeMode: 'contain', resizeMode: 'contain',
}, },
text: { text: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: width > 471 ? 40 : 32, fontSize: setSpText(65),
}, },
phone: { phone: {
width: width > 471 ? 40 : 32, width: scaleSize(80),
height: width > 471 ? 40 : 32, height: scaleSize(80),
marginRight: width > 471 ? 10 : 8, marginRight: scaleSize(15),
resizeMode: 'contain', resizeMode: 'contain',
}, },
face: { face: {
...@@ -654,21 +653,23 @@ const styles = { ...@@ -654,21 +653,23 @@ const styles = {
}, },
click: { click: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}, },
clickText: { clickText: {
fontSize: width > 471 ? 50 : 35, fontSize: setSpText(70),
color: '#fff', color: '#fff',
marginTop: width > 471 ? 25 : 20, // marginTop: scaleSize(50),
}, },
wxpay: { wxpay: {
width: width > 471 ? 72 : 40, width: scaleSize(90),
height: width > 471 ? 65 : 35, height: scaleSize(80),
marginTop: width > 471 ? 30 : 24, // marginTop: width > 471 ? 30 : 24,
marginRight: width > 471 ? 10 : 8, marginRight: scaleSize(20),
}, },
up: { up: {
width: width > 471 ? 100 : 70, width: scaleSize(180),
height: width > 471 ? 120 : 85, height: scaleSize(200),
}, },
footer: { footer: {
flex: 0.2, flex: 0.2,
...@@ -683,14 +684,14 @@ const styles = { ...@@ -683,14 +684,14 @@ const styles = {
justifyContent: 'center', justifyContent: 'center',
}, },
callGif: { callGif: {
width: width > 471 ? 350 : 250, width: scaleSize(500),
height: width > 471 ? 240 : 140, height: scaleSize(320),
marginLeft: width > 471 ? -120 : -90, marginLeft: scaleSize(-240),
}, },
callText: { callText: {
fontSize: 70, fontSize: setSpText(150),
color: '#fff', color: '#fff',
marginLeft: -50, // marginLeft: -50,
}, },
onCall: { onCall: {
flex: 0.2, flex: 0.2,
...@@ -702,15 +703,15 @@ const styles = { ...@@ -702,15 +703,15 @@ const styles = {
alignItems: 'center', alignItems: 'center',
}, },
onCallText: { onCallText: {
fontSize: width > 471 ? 70 : 40, fontSize: setSpText(85),
color: '#fff', color: '#fff',
marginLeft: width > 471 ? -70 : -40, marginLeft: scaleSize(-100),
}, },
modal: { modal: {
// flex: 0.2, // flex: 0.2,
marginTop: '30%', marginTop: '30%',
width: '100%', width: '100%',
height: width > 471 ? 200 : 160, height: scaleHeight(400),
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
...@@ -722,26 +723,25 @@ const styles = { ...@@ -722,26 +723,25 @@ const styles = {
backgroundColor: '#FC4000', backgroundColor: '#FC4000',
width: '70%', width: '70%',
// height: '18%', // height: '18%',
height: width > 471 ? 200 : 160, height: scaleHeight(400),
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
marginRight: 5, marginRight: scaleSize(15),
}, },
tipText: { tipText: {
fontSize: width > 471 ? 40 : 32, fontSize: setSpText(70),
color: '#fff', color: '#fff',
textAlign: 'center', textAlign: 'center',
paddingTop: width > 471 ? 40 : 32,
paddingBottom: width > 471 ? 40 : 32,
paddingLeft: 5,
paddingRight: 5,
}, },
callTouch: { callTouch: {
width: '30%', width: '30%',
// height: '18%', // height: '18%',
height: width > 471 ? 200 : 160, height: scaleHeight(400),
marginLeft: 5, marginLeft: scaleSize(15),
backgroundColor: '#FC4000', backgroundColor: '#FC4000',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}, },
callTips: { callTips: {
flexDirection: 'column', flexDirection: 'column',
...@@ -753,17 +753,14 @@ const styles = { ...@@ -753,17 +753,14 @@ const styles = {
// marginLeft: 5, // marginLeft: 5,
}, },
callTipsText: { callTipsText: {
fontSize: width > 471 ? 40 : 32, fontSize: setSpText(70),
color: '#fff', color: '#fff',
textAlign: 'center', textAlign: 'center',
paddingTop: width > 471 ? 70 : 56, paddingTop: scaleSize(30),
// paddingBottom: 40,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
}, },
callTipsImg: { callTipsImg: {
width: width > 471 ? 80 : 64, width: scaleSize(150),
height: width > 471 ? 60 : 48, height: scaleSize(150),
}, },
}; };
......
src/utils/screen.js
import {Dimensions} from 'react-native'; import {Dimensions, PixelRatio} from 'react-native';
/**
* 屏幕工具类
* ui设计基准,iphone 6
* width:750
* height:1334
*/
/*
设备的像素密度，例如：
PixelRatio.get() === 1 mdpi Android 设备 (160 dpi)
PixelRatio.get() === 1.5 hdpi Android 设备 (240 dpi)
PixelRatio.get() === 2 iPhone 4, 4S,iPhone 5, 5c, 5s,iPhone 6,xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 3 iPhone 6 plus , xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 3.5 Nexus 6
*/
const {width: _width, height: _height} = Dimensions.get('window'); //获取设备的宽度、高度
const fontScale = PixelRatio.getFontScale(); //返回字体大小缩放比例
// let pixelRatio = PixelRatio.get(); //当前设备的像素密度
// const defaultPixel = 2; //iphone6的像素密度
//px转换成dp
// const w2 = 1080 / defaultPixel;
// const h2 = 1920 / defaultPixel;
const w2 = 1080;
const h2 = 1920;
const scale = Math.min(_height / h2, _width / w2); //获取缩放比例
//缩放比例
const _scaleWidth = _width / w2;
const _scaleHeight = _height / h2;
/**
* 设置text为sp
* @param size sp
* return number dp
*/
export function setSpText(size: number) {
// size = Math.round(((size * scale + 0.5) * pixelRatio) / fontScale);
size = Math.round((size * scale + 0.5) / fontScale);
// return size / defaultPixel;
return size;
}
/**
* 屏幕适配,缩放size , 默认根据宽度适配，纵向也可以使用此方法
* 横向的尺寸直接使用此方法
* 如：width ,paddingHorizontal ,paddingLeft ,paddingRight ,marginHorizontal ,marginLeft ,marginRight
* @param size 设计图的尺寸
* @returns {number}
*/
export function scaleSize(size: Number) {
size = Math.round(size * _scaleWidth + 0.5);
return size;
}
/**
* 屏幕适配 , 纵向的尺寸使用此方法应该会更趋近于设计稿
* 如：height ,paddingVertical ,paddingTop ,paddingBottom ,marginVertical ,marginTop ,marginBottom
* @param size 设计图的尺寸
* @returns {number}
*/
export function scaleHeight(size: Number) {
size = Math.round(size * _scaleHeight + 0.5);
return size;
}
const {width: _width, height: _height} = Dimensions.get('window');
export const w = 1; export const w = 1;
export const h = 1; export const h = 1;
export const width = _width * w; export const width = _width * w;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment