第七天～

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

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

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

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

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

Style

Style 在 React 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. 希望背景不要是白色太單調，那我們設定一個 root 的 style ，並把它掛在 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",
  },
});

這時畫面就變成：

2. 希望我們的字能夠大一點，顏色為白色，並且置中，再新增一個 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",
  },
});

這時畫面就變成：

3. 最後，希望可以垂直置中

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

這就是最後畫面啦：