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 {Image, Text, View} from 'react-native';
import {appName} from '../utils/config';
import {setSpText, scaleSize} from '../utils/screen';
class HomeLayout extends Component {
render() {
return (
......@@ -12,7 +14,7 @@ class HomeLayout extends Component {
resizeMode="contain"
/>
<Image
style={{marginLeft: 20}}
style={{marginLeft: scaleSize(40)}}
source={require('../assets/Vertical/24h.png')}
/>
<Text style={styles.titleText}>{appName}</Text>
......@@ -25,9 +27,9 @@ class HomeLayout extends Component {
const styles = {
title: {
top: 0,
paddingLeft: 30,
paddingLeft: scaleSize(50),
flexDirection: 'row',
height: 100,
height: scaleSize(220),
width: '100%',
position: 'absolute',
backgroundColor: 'white',
......@@ -35,12 +37,12 @@ const styles = {
elevation: 10,
},
titleImg: {
width: 80,
height: 80,
width: scaleSize(150),
height: scaleSize(150),
},
titleText: {
color: '#333',
fontSize: 40,
fontSize: setSpText(60),
marginLeft: 30,
},
container: {
......
src/components/OrderDetailsModal.js
......@@ -7,7 +7,7 @@ import {font} from '../utils/common';
import Touch from './Touch';
import NP from '../utils/np';
import phone from '../assets/Vertical/phone.png';
import {width} from '../utils/screen';
import {setSpText, scaleSize, scaleHeight} from '../utils/screen';
let pageSize = 6; // 分页大小
......@@ -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 {
state = {
conatct: '',
......@@ -223,7 +172,7 @@ class OrderDetailsModal extends Component {
<Icon
name="md-close"
color={'#FFFFFF'}
size={width > 471 ? 50 : 35}
size={scaleSize(90)}
/>
</Touch>
<Text style={styles.text}>{contact}</Text>
......@@ -404,20 +353,17 @@ const styles = {
},
header: {
flex: 0.2,
// backgroundColor: '#00CD66',
backgroundColor: 'rgb(0,205,102)',
width: '100%',
flexDirection: 'column',
// borderTopRightRadius: 10,
// // borderTopLeftRadius: 10,
},
title: {
flexDirection: 'row',
justifyContent: 'space-between',
marginLeft: width > 471 ? 30 : 15,
marginRight: width > 471 ? 30 : 15,
marginTop: width > 471 ? 10 : 5,
marginBottom: width > 471 ? 10 : 5,
marginLeft: scaleSize(20),
marginRight: scaleSize(20),
marginTop: scaleSize(10),
marginBottom: scaleSize(10),
},
left: {
flexDirection: 'row',
......@@ -428,20 +374,20 @@ const styles = {
alignItems: 'center',
},
img: {
width: width > 471 ? 60 : 40,
height: width > 471 ? 60 : 40,
marginRight: width > 471 ? 10 : 8,
width: scaleSize(90),
height: scaleSize(90),
marginRight: scaleSize(20),
resizeMode: 'contain',
},
text: {
color: '#FFFFFF',
fontSize: width > 471 ? 35 : 28,
marginRight: width > 471 ? 30 : 24,
fontSize: setSpText(63),
marginRight: scaleSize(20),
},
phone: {
width: width > 471 ? 40 : 30,
height: width > 471 ? 40 : 30,
marginRight: width > 471 ? 10 : 5,
width: scaleSize(70),
height: scaleSize(70),
marginRight: scaleSize(15),
resizeMode: 'contain',
},
headline: {
......@@ -451,7 +397,7 @@ const styles = {
flex: 1,
},
headTitle: {
fontSize: width > 471 ? 60 : 48,
fontSize: setSpText(100),
color: '#fff',
},
customerPhone: {
......@@ -462,14 +408,14 @@ const styles = {
marginLeft: '5%',
marginRight: '5%',
marginBottom: '2%',
paddingTop: width > 471 ? 10 : 8,
paddingBottom: width > 471 ? 10 : 8,
paddingTop: scaleHeight(10),
paddingBottom: scaleHeight(10),
elevation: 3,
},
number: {
color: '#FFFFFF',
fontSize: width > 471 ? 30 : 24,
marginRight: width > 471 ? 30 : 24,
fontSize: setSpText(65),
marginRight: scaleSize(20),
},
container: {
flex: 0.6,
......@@ -489,19 +435,19 @@ const styles = {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
margin: width > 471 ? 10 : 8,
margin: scaleSize(5),
},
empty: {
flexDirection: 'row',
margin: width > 471 ? 10 : 8,
margin: scaleSize(5),
},
emptyImg: {
width: 400,
height: 400,
width: scaleSize(800),
height: scaleSize(900),
resizeMode: 'contain',
},
tips: {
fontSize: width > 471 ? 30 : 20,
fontSize: setSpText(45),
// color: '#8B8989',
color: 'red',
},
......@@ -511,37 +457,37 @@ const styles = {
pagination: {
flex: 1,
backgroundColor: '#fff',
marginTop: '12%',
marginTop: '8%',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
// justifyContent: 'center',
},
paginationText: {
fontSize: width > 471 ? 40 : 32,
fontSize: setSpText(60),
},
imgPagination: {
width: width > 471 ? 50 : 40,
height: width > 471 ? 50 : 40,
width: scaleSize(90),
height: scaleSize(90),
},
firstThStyle: {
width: '40%',
alignItems: 'flex-start',
paddingTop: width > 471 ? 14 : 10,
paddingBottom: width > 471 ? 14 : 10,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
paddingTop: scaleSize(14),
paddingBottom: scaleSize(14),
paddingLeft: scaleSize(8),
paddingRight: scaleSize(8),
marginLeft: '10%',
},
ThStyle: {
width: '20%',
alignItems: 'center',
paddingTop: width > 471 ? 14 : 10,
paddingBottom: width > 471 ? 14 : 10,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
paddingTop: scaleSize(14),
paddingBottom: scaleSize(14),
paddingLeft: scaleSize(8),
paddingRight: scaleSize(8),
},
ThText: {
fontSize: width > 471 ? 30 : 20,
fontSize: setSpText(55),
},
oddCell: {
flexDirection: 'row',
......@@ -555,10 +501,10 @@ const styles = {
width: '40%',
justifyContent: 'center',
alignItems: 'flex-start',
paddingTop: width > 471 ? 14 : 10,
paddingBottom: width > 471 ? 14 : 10,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
paddingTop: scaleSize(14),
paddingBottom: scaleSize(14),
paddingLeft: scaleSize(8),
paddingRight: scaleSize(8),
marginLeft: '5%',
},
TdStyle: {
......@@ -566,34 +512,32 @@ const styles = {
width: '20%',
alignItems: 'center',
justifyContent: 'center',
paddingTop: width > 471 ? 14 : 10,
paddingBottom: width > 471 ? 14 : 10,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
paddingTop: scaleSize(14),
paddingBottom: scaleSize(14),
paddingLeft: scaleSize(8),
paddingRight: scaleSize(8),
},
TdText: {
fontSize: width > 471 ? 20 : 16,
fontSize: setSpText(45),
},
amount: {
flexDirection: 'column',
height: width > 471 ? '25%' : '22%',
height: '23%',
backgroundColor: '#FFF',
marginLeft: '2%',
marginRight: '2%',
marginLeft: '5%',
marginRight: '10%',
},
total: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginLeft: width > 471 ? 30 : 20,
marginRight: width > 471 ? 30 : 20,
marginTop: width > 471 ? 15 : 8,
marginTop: scaleSize(5),
},
totalText: {
fontSize: width > 471 ? 30 : 20,
fontSize: setSpText(55),
},
discount: {
fontSize: width > 471 ? 30 : 20,
fontSize: setSpText(60),
color: 'red',
},
line: {
......@@ -604,10 +548,10 @@ const styles = {
},
realPay: {
flexDirection: 'column',
height: width > 471 ? '16%' : '14%',
height: '14%',
backgroundColor: '#FFF',
marginLeft: '2%',
marginRight: '2%',
marginLeft: '5%',
marginRight: '10%',
},
footer: {
flex: 0.2,
......@@ -622,14 +566,13 @@ const styles = {
alignItems: 'center',
},
callGif: {
width: width > 471 ? 350 : 240,
height: width > 471 ? 240 : 150,
marginLeft: width > 471 ? -120 : -96,
width: scaleSize(500),
height: scaleSize(320),
marginLeft: scaleSize(-240),
},
callText: {
fontSize: width > 471 ? 70 : 56,
fontSize: setSpText(150),
color: '#fff',
marginLeft: width > 471 ? -50 : -40,
},
onCall: {
flex: 0.2,
......@@ -641,9 +584,9 @@ const styles = {
alignItems: 'center',
},
onCallText: {
fontSize: width > 471 ? 70 : 40,
fontSize: setSpText(85),
color: '#fff',
marginLeft: width > 471 ? -70 : -56,
marginLeft: scaleSize(-100),
},
};
......
src/components/PhoneModal.js
......@@ -6,7 +6,7 @@ import ModalStyles from './Modal/styles';
import {colors, font} from '../utils/common';
import Touch from './Touch';
import phone from '../assets/Vertical/phone.png';
import {width} from '../utils/screen';
import {setSpText, scaleSize} from '../utils/screen';
const mStyles = {
...ModalStyles,
......@@ -116,8 +116,8 @@ class PhoneModal extends Component {
<Text
style={{
color: 'red',
fontSize: width > 471 ? 45 : 32,
marginBottom: width > 471 ? 10 : 8,
fontSize: setSpText(70),
marginBottom: scaleSize(10),
}}>
请输入接收验证码的手机号
</Text>
......@@ -129,10 +129,10 @@ class PhoneModal extends Component {
}}>
<TextInput
style={{
fontSize: 35,
fontSize: setSpText(90),
width: '80%',
textAlign: 'center',
padding: width > 471 ? 30 : 20,
padding: scaleSize(20),
color: '#000',
}}
placeholder="安全输入不留痕迹"
......@@ -143,7 +143,11 @@ class PhoneModal extends Component {
<Touch
onPress={() => this.setState({value: ''})}
feddback={false}>
<Icon name="md-close" color={'#DCDCDC'} size={50} />
<Icon
name="md-close"
color={'#DCDCDC'}
size={scaleSize(120)}
/>
</Touch>
</View>
</View>
......@@ -166,7 +170,7 @@ class PhoneModal extends Component {
<MIcon
style={styles.keyUnit}
name="backspace-outline"
size={60}
size={scaleSize(10)}
/>
</Touch>
</View>
......@@ -222,9 +226,9 @@ const styles = {
title: {
flexDirection: 'row',
justifyContent: 'space-between',
marginLeft: width > 471 ? 30 : 24,
marginRight: width > 471 ? 30 : 24,
marginTop: width > 471 ? 10 : 5,
marginLeft: scaleSize(20),
marginRight: scaleSize(20),
marginTop: scaleSize(5),
},
left: {
flexDirection: 'row',
......@@ -233,18 +237,18 @@ const styles = {
right: {
flexDirection: 'row-reverse',
alignItems: 'center',
marginTop: width > 471 ? 15 : 12,
marginTop: scaleSize(20),
},
img: {
width: width > 471 ? 80 : 60,
height: width > 471 ? 80 : 60,
marginRight: width > 471 ? 10 : 5,
width: scaleSize(120),
height: scaleSize(120),
marginRight: scaleSize(10),
resizeMode: 'contain',
},
phone: {
width: width > 471 ? 40 : 30,
height: width > 471 ? 40 : 30,
marginRight: width > 471 ? 10 : 8,
width: scaleSize(60),
height: scaleSize(60),
marginRight: scaleSize(10),
resizeMode: 'contain',
},
image: {
......@@ -254,13 +258,13 @@ const styles = {
alignItems: 'center',
},
logo: {
width: width > 471 ? 150 : 120,
height: width > 471 ? 150 : 120,
width: scaleSize(320),
height: scaleSize(320),
resizeMode: 'contain',
},
text: {
color: '#FFFFFF',
fontSize: width > 471 ? 30 : 25,
fontSize: setSpText(65),
},
container: {
flex: 0.2,
......@@ -290,19 +294,19 @@ const styles = {
keyRow: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: 10,
marginLeft: 20,
marginRight: 10,
marginTop: scaleSize(25),
marginLeft: scaleSize(50),
marginRight: scaleSize(25),
flex: 0.33,
},
keyRowBottom: {
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
marginTop: 10,
marginLeft: 20,
marginRight: 10,
marginBottom: 10,
marginTop: scaleSize(25),
marginLeft: scaleSize(50),
marginRight: scaleSize(25),
marginBottom: scaleSize(25),
flex: 0.2,
},
keyBottomTouch: {
......@@ -322,7 +326,7 @@ const styles = {
marginHorizontal: 5,
},
keyUnit: {
fontSize: 50,
fontSize: setSpText(100),
color: colors.text,
},
footerRight: {
......@@ -334,10 +338,10 @@ const styles = {
keyRowClose: {
flexDirection: 'row',
justifyContent: 'center',
marginLeft: 10,
marginTop: 10,
marginRight: 5,
flex: 0.25,
marginTop: scaleSize(25),
marginLeft: scaleSize(45),
marginRight: scaleSize(15),
flex: 0.22,
},
keyTouchClose: {
width: '90%',
......@@ -350,11 +354,11 @@ const styles = {
keyRowSure: {
flexDirection: 'row',
justifyContent: 'center',
marginLeft: 10,
marginTop: 10,
marginBottom: 10,
marginRight: 5,
flex: 0.75,
marginTop: scaleSize(25),
marginLeft: scaleSize(45),
marginRight: scaleSize(15),
marginBottom: scaleSize(25),
flex: 0.78,
},
keyTouchSure: {
width: '90%',
......@@ -373,7 +377,7 @@ const styles = {
marginHorizontal: 5,
},
keyUnitClose: {
fontSize: width > 471 ? 50 : 40,
fontSize: setSpText(85),
color: '#FFFFFF',
},
};
......
src/components/Placeholder.js
import React, {Component} from 'react';
import {View, Image, Text} from 'react-native';
import HomeLayout from './HomeLayout';
import {setSpText, scaleSize} from '../utils/screen';
class Placeholder extends Component {
render() {
......@@ -22,9 +23,12 @@ const styles = {
alignItems: 'center',
background: 'white',
},
img: {
width: '100%',
},
text: {
fontSize: 30,
marginTop: 20,
fontSize: setSpText(60),
marginTop: scaleSize(20),
color: 'gray',
},
};
......
src/components/VerifyCodeModal.js
......@@ -6,7 +6,7 @@ import ModalStyles from './Modal/styles';
import {colors, font} from '../utils/common';
import Touch from './Touch';
import phone from '../assets/Vertical/phone.png';
import {width} from '../utils/screen';
import {setSpText, scaleSize} from '../utils/screen';
const mStyles = {
...ModalStyles,
......@@ -210,9 +210,9 @@ const styles = {
title: {
flexDirection: 'row',
justifyContent: 'space-between',
marginLeft: width > 471 ? 30 : 24,
marginRight: width > 471 ? 30 : 24,
marginTop: width > 471 ? 10 : 8,
marginLeft: scaleSize(20),
marginRight: scaleSize(20),
marginTop: scaleSize(5),
},
left: {
flexDirection: 'row',
......@@ -221,18 +221,18 @@ const styles = {
right: {
flexDirection: 'row-reverse',
alignItems: 'center',
marginTop: width > 471 ? 15 : 12,
marginTop: scaleSize(20),
},
img: {
width: width > 471 ? 80 : 60,
height: width > 471 ? 80 : 60,
marginRight: width > 471 ? 10 : 5,
width: scaleSize(120),
height: scaleSize(120),
marginRight: scaleSize(10),
resizeMode: 'contain',
},
phone: {
width: width > 471 ? 40 : 30,
height: width > 471 ? 40 : 30,
marginRight: width > 471 ? 10 : 8,
width: scaleSize(60),
height: scaleSize(60),
marginRight: scaleSize(10),
resizeMode: 'contain',
},
image: {
......@@ -242,13 +242,13 @@ const styles = {
alignItems: 'center',
},
logo: {
width: width > 471 ? 150 : 120,
height: width > 471 ? 150 : 120,
width: scaleSize(320),
height: scaleSize(320),
resizeMode: 'contain',
},
text: {
color: '#FFFFFF',
fontSize: width > 471 ? 30 : 25,
fontSize: setSpText(65),
},
container: {
flex: 0.3,
......@@ -259,8 +259,8 @@ const styles = {
},
tips: {
color: 'red',
fontSize: width > 471 ? 45 : 32,
marginBottom: width > 471 ? 10 : 8,
fontSize: setSpText(90),
marginBottom: scaleSize(10),
textAlign: 'center',
},
codeView: {
......@@ -268,15 +268,15 @@ const styles = {
justifyContent: 'space-around',
alignItems: 'center',
flex: 0.5,
marginTop: width > 471 ? 30 : 24,
marginTop: scaleSize(30),
},
code: {
height: '100%',
width: '15%',
borderWidth: 4,
borderWidth: scaleSize(8),
borderColor: '#DCDCDC',
textAlign: 'center',
fontSize: 50,
fontSize: setSpText(120),
textAlignVertical: 'center',
},
footer: {
......@@ -299,19 +299,19 @@ const styles = {
keyRow: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: 10,
marginLeft: 20,
marginRight: 10,
marginTop: scaleSize(25),
marginLeft: scaleSize(50),
marginRight: scaleSize(25),
flex: 0.33,
},
keyRowBottom: {
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
marginTop: 10,
marginLeft: 20,
marginRight: 10,
marginBottom: 10,
marginTop: scaleSize(25),
marginLeft: scaleSize(50),
marginRight: scaleSize(25),
marginBottom: scaleSize(25),
flex: 0.2,
},
keyBottomTouch: {
......@@ -331,7 +331,7 @@ const styles = {
marginHorizontal: 5,
},
keyUnit: {
fontSize: 50,
fontSize: setSpText(100),
color: colors.text,
},
footerRight: {
......@@ -343,10 +343,10 @@ const styles = {
keyRowClose: {
flexDirection: 'row',
justifyContent: 'center',
marginLeft: 10,
marginTop: 10,
marginRight: 5,
flex: 0.25,
marginTop: scaleSize(25),
marginLeft: scaleSize(45),
marginRight: scaleSize(15),
flex: 0.22,
},
keyTouchClose: {
width: '90%',
......@@ -359,11 +359,11 @@ const styles = {
keyRowSure: {
flexDirection: 'row',
justifyContent: 'center',
marginLeft: 10,
marginTop: 10,
marginBottom: 10,
marginRight: 5,
flex: 0.75,
marginTop: scaleSize(25),
marginLeft: scaleSize(45),
marginRight: scaleSize(15),
marginBottom: scaleSize(25),
flex: 0.78,
},
keyTouchSure: {
width: '90%',
......@@ -382,7 +382,7 @@ const styles = {
marginHorizontal: 5,
},
keyUnitClose: {
fontSize: width > 471 ? 50 : 40,
fontSize: setSpText(85),
color: '#FFFFFF',
},
};
......
src/pages/AuthPage.js
......@@ -6,6 +6,7 @@ import axios from 'axios';
import {counterLogin} from '../utils/authLogin';
import config from '../utils/config';
import HomeLayout from '../components/HomeLayout';
import {setSpText, scaleSize} from '../utils/screen';
class AuthPage extends Component {
state = {};
......@@ -33,7 +34,7 @@ class AuthPage extends Component {
<HomeLayout>
<View style={styles.qrcode}>
<QRCode
size={350}
size={scaleSize(700)}
logo={require('../assets/logo.png')}
logoBackgroundColor="#FC4000"
backgroundColor="white"
......@@ -47,7 +48,7 @@ class AuthPage extends Component {
const styles = {
qrcode: {
padding: 10,
padding: setSpText(10),
backgroundColor: 'white',
elevation: 5,
},
......
src/pages/FacePage.js
......@@ -15,9 +15,7 @@ import phone from '../assets/Vertical/phone.png';
import {onTalkCall, leaveTalkCall} from '../utils/agora';
import Toast from '../components/Toast';
import Screensaver from '../components/Screensaver';
import {width} from '../utils/screen';
// const {width} = Dimensions.get('screen');
import {width, setSpText, scaleSize, scaleHeight} from '../utils/screen';
class FacePage extends Component {
state = {
......@@ -33,7 +31,7 @@ class FacePage extends Component {
tip: '',
tipsModal: false,
faceType: 'wxpay',
sleep: true,
sleep: false,
};
async componentWillMount() {
......@@ -395,7 +393,8 @@ class FacePage extends Component {
clearTimeout(this.wakeUpTimeout);
this.wakeUpTimeout = setTimeout(() => {
this.setState({sleep: true});
}, 18888);
}, 1000 * 60 * 60);
// }, 18888);
};
render() {
......@@ -587,19 +586,19 @@ const styles = {
title: {
flexDirection: 'row',
justifyContent: 'space-between',
marginLeft: width > 471 ? 30 : 15,
marginRight: width > 471 ? 30 : 15,
marginTop: width > 471 ? 10 : 8,
marginLeft: scaleSize(30),
marginRight: scaleSize(30),
marginTop: scaleSize(10),
},
headline: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
marginBottom: width > 471 ? 20 : 16,
marginBottom: scaleSize(20),
},
headTitle: {
fontSize: width > 471 ? 60 : 48,
fontSize: setSpText(100),
color: '#fff',
},
left: {
......@@ -611,19 +610,19 @@ const styles = {
alignItems: 'center',
},
img: {
width: width > 471 ? 60 : 48,
height: width > 471 ? 60 : 48,
marginRight: width > 471 ? 10 : 8,
width: scaleSize(90),
height: scaleSize(90),
marginRight: scaleSize(20),
resizeMode: 'contain',
},
text: {
color: '#FFFFFF',
fontSize: width > 471 ? 40 : 32,
fontSize: setSpText(65),
},
phone: {
width: width > 471 ? 40 : 32,
height: width > 471 ? 40 : 32,
marginRight: width > 471 ? 10 : 8,
width: scaleSize(80),
height: scaleSize(80),
marginRight: scaleSize(15),
resizeMode: 'contain',
},
face: {
......@@ -654,21 +653,23 @@ const styles = {
},
click: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
clickText: {
fontSize: width > 471 ? 50 : 35,
fontSize: setSpText(70),
color: '#fff',
marginTop: width > 471 ? 25 : 20,
// marginTop: scaleSize(50),
},
wxpay: {
width: width > 471 ? 72 : 40,
height: width > 471 ? 65 : 35,
marginTop: width > 471 ? 30 : 24,
marginRight: width > 471 ? 10 : 8,
width: scaleSize(90),
height: scaleSize(80),
// marginTop: width > 471 ? 30 : 24,
marginRight: scaleSize(20),
},
up: {
width: width > 471 ? 100 : 70,
height: width > 471 ? 120 : 85,
width: scaleSize(180),
height: scaleSize(200),
},
footer: {
flex: 0.2,
......@@ -683,14 +684,14 @@ const styles = {
justifyContent: 'center',
},
callGif: {
width: width > 471 ? 350 : 250,
height: width > 471 ? 240 : 140,
marginLeft: width > 471 ? -120 : -90,
width: scaleSize(500),
height: scaleSize(320),
marginLeft: scaleSize(-240),
},
callText: {
fontSize: 70,
fontSize: setSpText(150),
color: '#fff',
marginLeft: -50,
// marginLeft: -50,
},
onCall: {
flex: 0.2,
......@@ -702,15 +703,15 @@ const styles = {
alignItems: 'center',
},
onCallText: {
fontSize: width > 471 ? 70 : 40,
fontSize: setSpText(85),
color: '#fff',
marginLeft: width > 471 ? -70 : -40,
marginLeft: scaleSize(-100),
},
modal: {
// flex: 0.2,
marginTop: '30%',
width: '100%',
height: width > 471 ? 200 : 160,
height: scaleHeight(400),
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
......@@ -722,26 +723,25 @@ const styles = {
backgroundColor: '#FC4000',
width: '70%',
// height: '18%',
height: width > 471 ? 200 : 160,
height: scaleHeight(400),
justifyContent: 'center',
alignItems: 'center',
marginRight: 5,
marginRight: scaleSize(15),
},
tipText: {
fontSize: width > 471 ? 40 : 32,
fontSize: setSpText(70),
color: '#fff',
textAlign: 'center',
paddingTop: width > 471 ? 40 : 32,
paddingBottom: width > 471 ? 40 : 32,
paddingLeft: 5,
paddingRight: 5,
},
callTouch: {
width: '30%',
// height: '18%',
height: width > 471 ? 200 : 160,
marginLeft: 5,
height: scaleHeight(400),
marginLeft: scaleSize(15),
backgroundColor: '#FC4000',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
callTips: {
flexDirection: 'column',
......@@ -753,17 +753,14 @@ const styles = {
// marginLeft: 5,
},
callTipsText: {
fontSize: width > 471 ? 40 : 32,
fontSize: setSpText(70),
color: '#fff',
textAlign: 'center',
paddingTop: width > 471 ? 70 : 56,
// paddingBottom: 40,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
paddingTop: scaleSize(30),
},
callTipsImg: {
width: width > 471 ? 80 : 64,
height: width > 471 ? 60 : 48,
width: scaleSize(150),
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 h = 1;
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