React Native – Bài 3: Ứng dụng

Nếu bạn mở ứng dụng mặc định, bạn có thể quan sát thấy tệp app.js trông giống như

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

kết quả

Hello World

Để hiển thị một thông báo đơn giản có nội dung “Chào mừng bạn đến với Tutorialspoint”, hãy xóa phần CSS và chèn thông báo sẽ được in bao bọc bởi các thẻ <text></text> bên trong <view></view> như hình bên dưới.

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

export default class App extends React.Component {
   render() {
      return (
         <View>
            <Text>Welcome to Tutorialspoint</Text>
         </View>
      );
   }
}