React-native bài 3: View Component
Nội dung bài viết ♥
- Tạo các thư mục chứa Component
- Tạo Component và export component
- Chạy Component
- In ra hình tròn
I. Tạo thư mục chứa Component
- Tạo thư mục src - tạo component bên trong src, tạo thêm Avatar và Dummy, sau đó tạo file index.js như hình
II. Tạo Component và export
- Tạo component Avatar trong index.js
- import React, {Component} from "react";import { View } from "react-native";
export default class Avatar extends Component{render(){return<View></View>}} - Export Component Avatar: Quay trở lại index.jx của component
III. Chạy Component
- Đến thư mục App.js import component Avatar vào
- //B1 Import thư việnimport React, { Component } from "react";import {AppRegistry, View, Text, StatusBar} from "react-native";import { Avatar } from "./src/component";
//B2 Viết code Classexport default class Demo extends Component {render() {return (<Avatar />);}}
//B3 RegisterAppRegistry.registerComponent('Demo', () => Demo); - Quay trở lại index.js trong component Avatar và in ra dòng Hello
IV. In ra hình tròn
- Trong index.js Avatar ta truyền các tham số width, height,...
- import React, { Component } from "react";import { View, Text } from "react-native";
export default class Avatar extends Component {render() {const {width, height, borderRadius, backgroundColor } = this.props;return(<View style={{width,height,borderRadius,backgroundColor}}/>);}} - Trở lại App.js truyền giá trị vào các tham số
- export default class Demo extends Component {render() {return (<View><Avatarwidth={50}height={50}borderRadius={50 / 2}backgroundColor={"red"} /></View>);}}
- Kết quả
