Tạo một component đơn giản trong React Native

d52bb1 2024

Bước 1: Tạo thư mục chứa component

Trong thư mục project, tạo thư mục con là  Comps, trong thư mục này tạo một file js là  DemoInput.js

Bước 2: Viết code cho component

 

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


const DemoInput = () => {
 return (
   <View style={st.khung}>
     <Text style={st.tieuDe}>Demo thẻ input</Text>
     <TextInput placeholder='Nhập họ tên' />
   </View>
 )
}

export default DemoInput

const st = StyleSheet.create({
   khung:{ backgroundColor:'cyan', padding: 20},
   tieuDe:{ color: "red", fontSize:40}


})

 

Bước 3: Vào file App sử dụng DemoInput

 

import DemoInput from './Comps/DemoInput'

const App = () => {
 return (
   <View>
     <DemoInput />

   </View>
 )
}

Bước 4: Chạy ứng dụng

Thực hiện chạy ứng dụng và quan sát kết quả hiển thị trên màn hình

Nguồn: zezo.dev