Open2021/10/23にコメント追加4

[Scrap] React Native / Expo を触ってみる

なかざんさんの発表について Twitter でつぶやいたところ Expo をご紹介いただいたので、Expo に入門してみる。

Hello World

# cli tool のインストール
$ npm i -g expo-cli
# プロジェクトの作成
$ expo init my-project
# Run
$ cd my-project
$ expo start

公式の Tutorial

結構見つけにくい気がするけど、以下に Tutorial があった。

style の付け方

当たり前かも知れないけど、普通の React っぽい見た目だけど CSS を使って style を当てるわけではない。(擬似要素とかも使えないっぽい)

要素に直接記述する

  <Text style={{color: '#888', fontSize: 18}}>

StyleSheet を作成する

 <View style={styles.container} />
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

コンポーネント間のスペース空けたい時どうする?

上下のどちらかのコンポーネントに Margin をつけるか、空 div 的な表現を気にしないなら、空の View に height を設定するのでも良さそう。

      <Image source={adaptiveIcon} />
      <View style={{ height: 12 }} />
      <Text style={{ color: "#888", fontSize: 18 }}>Some text</Text>