Javascript/reactnative/helloworld/expo
提供: 初心者エンジニアの簡易メモ
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ともにアプリで表示できた。
Appをクラスで記述
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
show1() {
console.log("hoge");
}
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
<Button
title="Button1"
onPress={this.show1}
containerViewStyle={styles.container}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
