ReactNative（七）——react-native-elements 2. 执⾏ react-native run-android 安装app在⼿机或者模拟机上；突然才发现RN版本升级后，项⽬⽬录结构变得更简洁了：新版的为⽤户节省了很多⼯作，将整个逻辑代码合并在⼀个App.js中，省去了⽤户⾃⼰新建项⽬的必要。
安装⽅法：
Step 1: Install react-native-vector-icons¶
npm i react-native-vector-icons --save &&
react-native link react-native-vector-icons
Step 2: Install react-native-elements¶
yarn add react-native-elements or
npm i react-native-elements --save
使⽤⽅法（使⽤什么组件，便引⼊其就可）：
import { Button } from 'react-native-elements';
部分组件——
1.button(按钮)：
onPress：⽤法类似于RN中button的⽤法，这种也是定义⼀个函数；
export default class App extends Component<{}> {
_onPress = () => {
alert('dianji');
};
render() {
return (
<View style={ainer}>
<Button
raised
icon={{ name: 'home', size: 32 }}
buttonStyle={{ backgroundColor: 'red', borderRadius: 10 }}
textStyle={{ textAlign: 'center' }}
onPress={this._onPress}
title={`Welcome to\nReact Native Elements`}
/>
</View>
)
}
...
2.Avatar(头像)：
限制头像⼤⼩：
small  medium large xlarge
rounded：默认为false（矩形），定义头像的形状，为ture则为圆形；
若想在头像中⾃定义图⽚，则有两种⽅法：
...
icon={{name: 'rocket', color: 'orange'}}  //通过icon属性设置
reactnativeui框架
...
...
source={{ uri: 's3.amazonaws/uifaces/faces/twitter/ladylexy/128.jpg' }}//通过类似于<Image />的source属性来定义...
overlayContainerStyle：定义图⽚之外视图的颜⾊；
onPress:⽤法同button；
containerStyle：定义整个容器的外部样式，⽐如宽⾼怎样的；
3.Badge(徽章，类似于聊天中未读消息右上⾓的阅读数):
……
很多组件，还是需要慢慢了解的~~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。