반응 네이티브에 Hello World를 표시하는 프로그램을 작성하시겠습니까?

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',
   },
});

이제 요구 사항에 따라 코드를 자유롭게 변경할 수 있습니다. 앱에 Hello World라는 텍스트를 표시하는 데 관심이 있습니다.

시작하려면 먼저 필요한 구성 요소와 모듈을 가져와야 합니다. React 모듈이 필요하므로 먼저 아래에 표시된 대로 가져오도록 하겠습니다. -

import React from 'react';

다음으로 Hello World라는 텍스트를 표시하기 위해 코드에서 사용할 다른 구성 요소를 가져오겠습니다.

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

StyleSheet, Text 및 View 구성 요소를 가져왔습니다. View 및 Text 구성 요소의 스타일을 지정하려면 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>
      );
   }
}

아래와 같이 텍스트를 Hello World로 변경 -

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

스타일의 소품이 보기 구성 요소에 추가됩니다. 주어진 값은 styles.container입니다. 소품 값은 중괄호 {}(예:style={styles.container})로 지정해야 합니다.

스타일 객체는 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를 사용하여 모바일 화면에 Hello World를 표시하는 데 도움이 되는 전체 코드입니다.

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'
   }
});

출력