Viết chương trình để hiển thị Hello World trong react native?

Sau khi ReactNative được cài đặt trên hệ thống của bạn, bạn sẽ nhận được mã mặc định trong App.js như sau -

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

Bây giờ bạn có thể tự do thay đổi mã theo yêu cầu của bạn. Chúng tôi muốn hiển thị dòng chữ Hello World trong ứng dụng ở đây.

Để bắt đầu, trước tiên bạn cần nhập các thành phần và mô-đun cần thiết. Chúng tôi cần mô-đun React, vì vậy trước tiên hãy nhập mô-đun đó như được hiển thị bên dưới -

import React from 'react';

Tiếp theo, hãy nhập các thành phần khác mà chúng ta sẽ sử dụng trong mã của mình để hiển thị văn bản Hello World.

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

Chúng tôi đã nhập thành phần StyleSheet, Text và View. Chúng ta cần thành phần StyleSheet để tạo kiểu cho thành phần View và Text. Thành phần View sẽ là thành phần mẹ sẽ có thành phần Text là con của nó.

Ứng dụng là lớp mặc định được xuất và bạn chạy dự án, bạn sẽ có thể thấy văn bản trong thành phần trên thiết bị của mình như được hiển thị bên dưới -

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

Thay đổi văn bản thành Hello World như hình dưới đây -

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

Đạo cụ của phong cách được thêm vào thành phần Chế độ xem. Giá trị được đưa ra là styles.container. Giá trị đạo cụ phải được đặt trong dấu ngoặc nhọn {} i.e style ={styles.container}.

Đối tượng kiểu được tạo bằng StyleSheet.create (). Tất cả những gì bạn tạo kiểu cho các thành phần có thể được định nghĩa bên trong StyleSheet.create (). Ngay bây giờ chúng ta đã xác định kiểu vùng chứa được sử dụng trên thành phần View là . Biến style forText được sử dụng để tạo kiểu cho thành phần Text.

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

Đây là mã đầy đủ giúp hiển thị Hello World trên màn hình điện thoại di động của bạn bằng cách sử dụng ReactNative.

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

Đầu ra