私は日本就職を目指して、勉強している韓国人大学生です。
もし、内容の中で間違った表現や言葉などがあれば、書き込みをしてください。

【React-Native】の目次

基本設定

プロジェクトを作成

$ react-native init react_native_basic
$ cd react_native_basic
$ npm start
$ react-native run-ios

App.jsを簡単に修正して、Class形で基本コンポーネントを作る

import React, {Component} from 'react';

class App extends Component {
    render() {
        return ();
    }
}

export default App;

`<View>`, `<Text>`で、画面を作る

アプリ内にメッセージを表示するため必要な<View>と<Text>をreact-nativeからインポート
```
import React, {Component} from 'react';
import {View, Text} from 'react-native';
```

コンポーネントの始めと終わりは<View>が必要、文字は<Text>の中に → **Hello World!**を表示

class App extends Component {
    render() {
        return (
            <View>
                <Text>Hello World!</Text>
            </View>
        );
    }
}

`<StyleSheet>`で、スタイルを追加

インラインスタイルで、スタイル追加可能

class App extends Component {
    render() {
        return (
            <View
                style={{
                    backgroundColor: 'green',
                    height: '100%',
                    paddingTop: 50,
                }}
            >
                <Text>Hello World!</Text>
            </View>
        );
    }
}

<StyleSheet>を活用すると、簡単にスタイルを適用できる

<StyleSheet>をreact-nativeからインポート

import {View, Text, StyleSheet} from 'react-native';

変数にスタイルを作成

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        backgroundColor: 'green',
        paddingTop: 50,
        alignItems: 'center',
        justifyContent: 'center',
    },
}

作成したスタイルを<View>に適用

class App extends Component {
    render() {
        return (
            <View style={styles.mainView}>
                <Text>Hello World!</Text>
            </View>
        );
    }
}