はじめに
React Nativeのローカル環境ができたばかりで何していいかわからないから
とにかく触ってみよう
おさらい。Expoを起動する
プロンプトを起動。
アプリ(MyApp)を保管しているディレクトリ(C:\Users\watya\myApp)へ移動して、expo起動
cd C:\Users\watya\myApp
expo start
web画面で手軽にチェック
w押下すると、実機でも見れる画面をweb画面から確認できる。
実機で見たいとき
d押下すると developer tool起動される。
ここに出てくるQRコードを、Andoroid端末で Expo Go起動して 読み込むと、Android端末から画面表示できる。
画面に表示する文字を変える
エディターでタグで囲まれてるところを編集。
保存をしたら直後にブラウザ画面の内容が反映される。
ちなみに文法エラーを起こした状態で保存したら画面真っ白になった。
developer toolsを見てみると、こっちでエラーが表示されてた。
超基本的なコード
React Nativeの
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hello React Native!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
四角を描く
タグの代わりに、外枠のの中に
を作って、その中でstyleSheetよろしく内容をかいたらいける。
<View style={styles.container}>
<View
style={{
height: 100,
width: "100%",
borderColor: "gray",
borderWidth: 1
}}
></View>
</View>
styleは変数化して呼び出せる
styleって変数化できるようだ。stylesheetも確かそんな感じだった。
すごいねぇ~。
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.itemContainer}></View> ← 下で定義したitemContainerはViewタグで呼ぶ感じ
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
itemContainer: { ←さっき作ったstyle。itemContainerって名前で定義した
height: 100,
width: "100%",
borderColor: "gray",
borderWidth: 1
},
});
四角の中に2つの四角を描く(widthで幅固定)
入れ子で描く。具体的にはタグの中にを入れる。
後、親のタグにのstylesに、flex or flexDirectionを付与する
要するにこんな感じ。
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.itemContainer}>
<View style={styles.oneContainer} />
<View style={styles.oneContainer} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
itemContainer: {
height: 100,
width: "100%",
borderColor: "gray",
borderWidth: 1,
flexDirection: "row"
},
oneContainer: {
backgroundColor: "red",
width: 100
},
});
脱線:flex, flexdirectionがよくわからない。。。
によると、
flexプロパティは、画面上に対する要素のflexDirection方向の大きさの比率。
とのこと。
なお、flexDirectionは明記されていない場合は、flexDirection: "column" 扱いだそうです。
四角の中に2つの四角を描く(widthつかわない)
widthだと幅固定しちゃうので、このコンテナは残り全部、ってやるときはflex: 1。でイケる。
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.itemContainer}>
<View style={styles.leftContainer} />
<View style={styles.rightContainer} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
itemContainer: {
height: 100,
width: "100%",
borderColor: "gray",
borderWidth: 1,
flexDirection: "row"
},
leftContainer: {
backgroundColor: "red",
width: 100
},
rightContainer: {
backgroundColor: "blue",
flex:1
},
});