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 コード スキャナーを使用する
以下の画面が表示される
プロジェクトルートフォルダの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',
},
});
自動でリロードされ、以下の画面が表示される