Hello Worldをreactnativeで表示するプログラムを作成しますか？

ReactNativeがシステムにインストールされると、次のようにApp.jsでデフォルトのコードを取得する必要があります-

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
   render() {
      return (
         <View style = {styles.container}>
            <Text>Open up App.js to start working on your app!</Text>
               <Text>Changes you make will automatically reload.</Text>
                  <Text>Shake your phone to open the developer menu.</Text>
               </View>
            );
         }
      }
      const styles = StyleSheet.create({
      container: {
         flex: 1,
         backgroundColor: '#fff',
         alignItems: 'center',
         justifyContent: 'center',
   },
});

これで、要件に応じてコードを自由に変更できます。ここでは、アプリにHelloWorldというテキストを表示することに関心があります。

まず、必要なコンポーネントとモジュールをインポートする必要があります。 Reactモジュールが必要なので、以下に示すように、最初にそれをインポートしましょう-

import React from 'react';

次に、テキストHelloWorldを表示するためにコードで使用する他のコンポーネントをインポートしましょう。

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

StyleSheet、Text、およびViewコンポーネントをインポートしました。ビューおよびテキストコンポーネントのスタイルを設定するには、StyleSheetコンポーネントが必要です。 Viewコンポーネントは、Textコンポーネントを子として持つ親コンポーネントになります。

アプリはエクスポートされるデフォルトのクラスであり、プロジェクトを実行すると、以下に示すように、デバイスのコンポーネントにテキストが表示されるはずです-

export default class App extends React.Component {
   render() {
   return (
      <View style = {styles.container}>
         <Text>Open up App.js to start working on your app!</Text>
            <Text>Changes you make will automatically reload.</Text>
               <Text>Shake your phone to open the developer menu.</Text>
         </View>
      );
   }
}

以下に示すように、テキストをHelloWorldに変更します-

export default class App extends React.Component {
   render() {
      return (
         <View style = {styles.container}>
            <Text>Hello World</Text>
         </View>
      );
   }
}

スタイルの小道具がビューコンポーネントに追加されます。指定された値はstyles.containerです。小道具の値は中括弧{}で指定する必要があります。つまり、style={styles.container}です。

stylesオブジェクトは、StyleSheet.create（）を使用して作成されます。コンポーネントのスタイルはすべて、StyleSheet.create（）内で定義できます。現在、Viewコンポーネントで使用されるコンテナスタイルをとして定義しています。 style forText変数は、Textコンポーネントのスタイルを設定するために使用されます。

const styles = StyleSheet.create({
   container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
   },
   forText: {
      color: 'green',
      fontSize: '25px'
   }
});

これは、ReactNativeを使用してモバイル画面にHelloWorldを表示するのに役立つ完全なコードです。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
   render() {
      return (
         <View style = {styles.container}><Text style={styles.forText}>Hello World</Text></View>
         );
      }
   }
   const styles = StyleSheet.create({
      container: {
         flex: 1,
         backgroundColor: '#fff',
         alignItems: 'center',
         justifyContent: 'center',
   },
   forText: {
      color: 'green',
      fontSize: '25px'
   }
});

出力