[ 卡卡 DAY 9 ] - React Native style 优化、共用没烦恼!window.innerWidth 在 RN 怎麽处理?

有没有想过如果我要调整整个 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

assets.js

  1. 建立 assets.js ,引入於 assets 资料夹的 icon / image
export const winIcon = require("@assets/icons/icon-winning.png");

export default {
  winIcon,
};
  1. 接着於建立 index.js 资料夹
import assets from "./assets";

export { assets };

  1. 於 App.js 引入使用
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>
  );
}

https://ithelp.ithome.com.tw/upload/images/20210922/20142011OIcFGKVpHb.png

style.js

  1. 创建 style.js

还记得网页的 window.innerWidth ?

在 React Native 我们需要引入 Dimensions 来侦测当前装置的萤幕宽高

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

export const SIZE = {
  width,
  height
}

// 您可以设定各种有可能会使用的样式来成为 const

  1. 於 index.js 资料夹引入,并且 export
import assets from "./assets";
import { SIZE } from "./style";

export { assets, SIZE };
  1. 於 App.js 引入使用
  • import { assets , SIZE } from '@src/constants';
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
    印出宽~~ 高~~~
console.log('height:', SIZE.height, 'width:', SIZE.width)

PS. 在此处带入%(${SIZE.width} - 50%)计算是没有效果的唷!需要使用纯数值

https://ithelp.ithome.com.tw/upload/images/20210922/20142011OzIlZuaEEM.png

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>
  );
}

画面呈现

https://ithelp.ithome.com.tw/upload/images/20210922/20142011ptW2ifqr1g.png

不只可以是变数,也可以是样式

  1. 於 style.js 写入
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
  },
});
  1. 於 index.js 资料夹引入,并且 export
import assets from "./assets";
import { SIZE, fonts } from "./style";

export { assets, SIZE, fonts };
  1. 於 App.js 引入使用
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>
  );
}

简单引入没烦恼
https://ithelp.ithome.com.tw/upload/images/20210922/20142011ugX3GsYIMY.png

补充

注意 的 style 在 React Native 需要设定宽跟高,而且不能是 % 只能是数值。

总结

在专案中,有时候UI的修改,会让我们一改就要全改,所以建议大家可以将 FONTS, COLORS, PADDING 设定成 const 照着上面的步骤引入使用,一次改全部改,应对 user 少了一个烦恼 XD

Day 9 done ! 请多多指教~


<<:  [DAY 19] 验算得分的理由及注意事项

>>:  [DAY 09] 光头古早味手工蛋饼

IOS、Python自学心得30天 Day-17 learning rate

前言: 经过多次的测试和训练 val_accuracy 在最後几乎都是处於0.6500左右的状态 所...

Day17 简易资料库RealmSwift小实作4

昨天我们说到刷新tableview的部分,因为每一笔资料写入都要将资料写进realm里,再从中回传至...

Vue.js 从零开始:Vue CLI 介绍与安装

为什麽要使用Vue CLI 开发环境复杂,透过Vue CLI整合环境,减少整合的时间。 套件使用过多...

SAP ERP 环境中持续稽核的快速采用方法

这次演讲的主题为「SAP ERP持续性稽核快速导入方法」,我想与大家分享我的想法,称为JBOT i...

[D03] test

Day 03 连假先发一下。晚点编辑 END ...