iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

React Native & Redux 初步探討系列 第 7

Day 07 Style

第七天~

我們昨天寫了個 Hello World 出來,

但是這只是單單把字給秀出來而已,

假如我們希望對畫面做調整的話,

讓我們的 Hello World 看起來不這麼單調的話,

我們就要使用 Style 來調整我們畫面的樣式

Style

StyleReact Native 是蠻重要的一個環節,

React Native 假如需要制定畫面的樣式,

都需要透過 Style 才能完成,

使用的方式有兩種:

  • StyleSheet.create([object])
const styles = StyleSheet.create({
  title: {
    backgroundColor: "#c0c0c0",
    width: 100,
  },
});
  • inline style
const styles = {
  title: {
    backgroundColor: "#c0c0c0",
    width: 100,
  },
};

如上,

我們可以用 object 去定義不同的 style,並且給 style 一個 key ,讓我們放入 component style props 參數裡

<View style={[styles.title]}></View>

兩者差別在哪裡?

StyleSheet.create 會去驗證每個 style 的參數是否符合, inline style 則不會


畢竟我們開發的是 雙平台的 APP,寫 CSS 也只是表象而已,

所以並不能完全的照著 CSS 那樣寫,

像是:

Selector

每個 style,只能影響當下的使用到的 component,不能像 web 透過 css selector 去影響其他元素

display

React Native 是不會有 block or inline ...等參數

它目前只有使用 flex 來做布局的排版

單位

畢竟是做雙平台開發, android 是 dp , ios 是 pt

那針對不同單位的問題,

React Native 採用 無單位的方式,

所以我們在開發時,是不需要使用任何單位的,

不過目前可以支援百分比 %

const styles = StyleSheet.create({
  title: {
    width: 100,
  },
});
//or
const styles = StyleSheet.create({
  title: {
    width: '50%',
  },
});

參數不能全部寫在一起

在 web 裡,我們 css 有些參數可以寫一起,
ex: margin、border、padding...等

好比說今天要調整 margin 但是上下左右都不一樣,

在 web , 是可以直接寫成

margin : 10 20 30 10

但是在 React Native,是不行的,

我們必須去設定每一個的參數

const styles = StyleSheet.create({
  title: {
    marginTop: 10,
    marginRight: 20,
    marginBottom: 30,
    marginLeft: 10,
  },
});

那相關的 style 參數是可以在 React Native 官網 找到


那我們知道如何設定了的話,

開始調整 Hello World 吧~

  1. 希望背景不要是白色太單調,那我們設定一個 rootstyle ,並把它掛在 View component
const App = () => {
  return (
    <SafeAreaView>
      <View style={styles.root}>
        <Text>Hello World~!!</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  root: {
    width: "100%",
    height: "100%",
    backgroundColor: "#f0a0aa",
  },
});

這時畫面就變成:
https://ithelp.ithome.com.tw/upload/images/20210923/20112878hiXGBY9D2H.png

  1. 希望我們的字能夠大一點,顏色為白色,並且置中,再新增一個 text style,掛在 Text component
const App = () => {
  return (
    <SafeAreaView>
      <View style={styles.root}>
        <Text style={styles.text}>Hello World~!!</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  root: {
    width: "100%",
    height: "100%",
    backgroundColor: "#f0a0aa",
  },
  text: {
    fontSize: 40,
    color: "#FFF",
    textAlign: "center",
  },
});

這時畫面就變成:
https://ithelp.ithome.com.tw/upload/images/20210923/20112878XOnQqGwAkH.png

  1. 最後,希望可以垂直置中
const App = () => {
  return (
    <SafeAreaView>
      <View style={styles.root}>
        <Text style={styles.text}>Hello World~!!</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  root: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    backgroundColor: "#f0a0aa",
  },
  text: {
    fontSize: 40,
    color: "#FFF",
    textAlign: "center",
  },
});

這就是最後畫面啦:
https://ithelp.ithome.com.tw/upload/images/20210923/20112878rYO1nIINAO.png


上一篇
Day 06 Hello World
下一篇
Day 08 React Component
系列文
React Native & Redux 初步探討33

尚未有邦友留言

立即登入留言