「Javascript/reactnative/helloworld/expo」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「==expoを使ったhelloworld== expo init Helloworld 以下構成で作成される <pre> ├── App.js ├── app.json ├── assets │ ├── favicon....」) |
(→expoを使ったhelloworld) |
||
| 行13: | 行13: | ||
├── package.json | ├── package.json | ||
└── yarn-error.log | └── yarn-error.log | ||
| + | </pre> | ||
| + | App.js | ||
| + | <pre> | ||
| + | import { StatusBar } from 'expo-status-bar'; | ||
| + | import React from 'react'; | ||
| + | import { StyleSheet, Text, View } from 'react-native'; | ||
| + | |||
| + | export default function App() { | ||
| + | return ( | ||
| + | <View style={styles.container}> | ||
| + | <Text>Open up App.js to start working on your app!</Text> | ||
| + | <StatusBar style="auto" /> | ||
| + | </View> | ||
| + | ); | ||
| + | } | ||
| + | |||
| + | const styles = StyleSheet.create({ | ||
| + | container: { | ||
| + | flex: 1, | ||
| + | backgroundColor: '#fff', | ||
| + | alignItems: 'center', | ||
| + | justifyContent: 'center', | ||
| + | }, | ||
| + | }); | ||
| + | </pre> | ||
| + | |||
| + | app.json | ||
| + | <pre> | ||
| + | { | ||
| + | "expo": { | ||
| + | "name": "Helloworld", | ||
| + | "slug": "Helloworld", | ||
| + | "version": "1.0.0", | ||
| + | "orientation": "portrait", | ||
| + | "icon": "./assets/icon.png", | ||
| + | "splash": { | ||
| + | "image": "./assets/splash.png", | ||
| + | "resizeMode": "contain", | ||
| + | "backgroundColor": "#ffffff" | ||
| + | }, | ||
| + | "updates": { | ||
| + | "fallbackToCacheTimeout": 0 | ||
| + | }, | ||
| + | "assetBundlePatterns": [ | ||
| + | "**/*" | ||
| + | ], | ||
| + | "ios": { | ||
| + | "supportsTablet": true | ||
| + | }, | ||
| + | "web": { | ||
| + | "favicon": "./assets/favicon.png" | ||
| + | } | ||
| + | } | ||
| + | } | ||
</pre> | </pre> | ||
===実行しQRコード表示=== | ===実行しQRコード表示=== | ||
2020年7月16日 (木) 12:31時点における版
expoを使ったhelloworld
expo init Helloworld
以下構成で作成される
├── App.js ├── app.json ├── assets │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── package.json └── yarn-error.log
App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
app.json
{
"expo": {
"name": "Helloworld",
"slug": "Helloworld",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
実行しQRコード表示
yarn start
端末をwifiでつなぎ、QRコードをexpoアプリで読み取ったところ、android,iosともにアプリで表示できた。
