Hầu hết các thành phần có thể custom được khi được tạo ra với các tham số khác nhau. Các tham số này được gọi là props. Ví dụ về Image sẽ giúp bạn sử dụng prop source để hiển thị ảnh
import React, {Component} from 'react';
import {Image} from 'react-native';
export default class ExProps extends Component {
render() {
let pic = {
uri:
'http://dotnet.edu.vn/images/logo-big.png',
};
// eslint-disable-next-line react-native/no-inline-styles
return <Image source={pic} style={{width: 300, height: 300}} />;
}
}
Components bạn viết ra cũng có thể sử dụng props. Ví dụ dưới đây sẽ mô tả cách sử dụng props trong Component riêng biệt
import React, {Component} from 'react';
import {Text,View} from 'react-native';
class Greeting extends Component {
render() {
return(
<Text>Thực hành {this.props.name}!</Text>
);
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name="Lập trình di động" />
<Greeting name="Thiết kế Web ASP.NET" />
<Greeting name="Lập trình Java" />
</View>
);
}
}
Sử dụng prop name giúp bạn có thể custom Greeting component 1 cách dễ dàng và giúp tái sử dụng lại component ở nhiều nơi