【React-Native】アプリ内にメッセージを表示する

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

【React-Native】の目次

1. RNのインストール
2. プロジェクトを作成
3. アプリ内メッセージを表示する
4. タッチイベント、ボタン、スクロール

基本設定

1. プロジェクトを作成

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

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

   import React, {Component} from 'react';
   
   class App extends Component {
       render() {
           return ();
       }
   }
   
   export default App;
   

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

1. アプリ内にメッセージを表示するため必要な<View>と<Text>をreact-nativeからインポート

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

2. コンポーネントの始めと終わりは<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>を活用すると、簡単にスタイルを適用できる

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

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

  2. 変数にスタイルを作成

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

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

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