有没有想过如果我要调整整个 App 的主色或字体大小,要一个一个元件改有多累?
有没有想过只要改一次就能完成该怎麽做!?
今天的主题,一改全改、共用没烦恼!交给 constants
window.innerWidth 在 RN 怎麽处理?
还记得 Day4 在 src 中有个 constants 资料夹吗?
没错,我们今天就是要在里面做事!!
.constants
├── mock/ // npm dependencies
├── index.js // export all of constants
├── style.js // style constants
└── assets.js // required icon / image
export const winIcon = require("@assets/icons/icon-winning.png");
export default {
winIcon,
};
import assets from "./assets";
export { assets };
import React from 'react';
import {Image, View} from 'react-native';
import {assets} from '@src/constants';
export default function App() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
}}>
<Image style={{width: 30, height: 30}} source={assets.winIcon} />
</View>
</View>
);
}
在 React Native 我们需要引入 Dimensions 来侦测当前装置的萤幕宽高
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');
export const SIZE = {
width,
height
}
// 您可以设定各种有可能会使用的样式来成为 const
import assets from "./assets";
import { SIZE } from "./style";
export { assets, SIZE };
import React from 'react';
import {Image, View} from 'react-native';
import { assets , SIZE } from '@src/constants';
export default function App() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
padding: `${SIZE.width} - 50%`,
}}>
<Image style={{width: 30, height: 30}} source={assets.winIcon} />
</View>
</View>
);
}
console.log('height:', SIZE.height, 'width:', SIZE.width)
PS. 在此处带入%(${SIZE.width} - 50%
)计算是没有效果的唷!需要使用纯数值
import React from 'react';
import {Image, View} from 'react-native';
import { assets , SIZE } from '@src/constants';
export default function App() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
width: SIZE.width - 100,
height: SIZE.height - 300,
}}>
<Image style={{width: 30, height: 30}} source={assets.winIcon} />
</View>
</View>
);
}
画面呈现
import { StyleSheet } from 'react-native';
export const fonts = StyleSheet.create({
h1: {
fontSize: 32,
lineHeight: 36,
fontWeight: 'bold'
},
h3: {
fontSize: 24,
lineHeight: 36,
fontWeight: 'bold'
},
p: {
fontSize: 16,
lineHeight: 36
},
});
import assets from "./assets";
import { SIZE, fonts } from "./style";
export { assets, SIZE, fonts };
import React from 'react';
import {Image, View} from 'react-native';
import { assets , SIZE, fonts } from '@src/constants';
export default function App() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={fonts.h3}>我是h3</Text>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
width: SIZE.width - 100,
height: SIZE.height - 300,
}}>
<Image style={{width: 30, height: 30}} source={assets.winIcon} />
</View>
</View>
);
}
简单引入没烦恼
注意 的 style 在 React Native 需要设定宽跟高,而且不能是 % 只能是数值。
在专案中,有时候UI的修改,会让我们一改就要全改,所以建议大家可以将 FONTS, COLORS, PADDING 设定成 const 照着上面的步骤引入使用,一次改全部改,应对 user 少了一个烦恼 XD
Day 9 done ! 请多多指教~
前言: 经过多次的测试和训练 val_accuracy 在最後几乎都是处於0.6500左右的状态 所...
昨天我们说到刷新tableview的部分,因为每一笔资料写入都要将资料写进realm里,再从中回传至...
为什麽要使用Vue CLI 开发环境复杂,透过Vue CLI整合环境,减少整合的时间。 套件使用过多...
这次演讲的主题为「SAP ERP持续性稽核快速导入方法」,我想与大家分享我的想法,称为JBOT i...
Day 03 连假先发一下。晚点编辑 END ...