0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

React Nativeをやってみよう

Posted at

React Nativeをやってみよう (1) - 環境構築

環境構築

Expo Goプロジェクトを作成、移動

npx create-expo-app AwesomeProject
cd AwesomeProject

開発サーバーが起動

npm start # you can also use: npx expo start

Expo GoアプリをiOSまたはAndroidにインストール
https://expo.dev/client

Android では、Expo Go アプリを使用して端末から QR コードをスキャンし、プロジェクトを開く
iOS では、デフォルトの iOS カメラ アプリの組み込み QR コード スキャナーを使用する

以下の画面が表示される

default.png

プロジェクトルートフォルダのapp.jsを書き換えて
Hello Worldのような任意の文字列に修正する

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World! We 're BlackRabbits!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

自動でリロードされ、以下の画面が表示される

helloworld.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?