react-native 中常见组件库 react-native-element

react-native-element

下载

• 需要使用到图标 因此也需要安装 react-native-vector-icons

  npm install --save react-native-elements react-native-vector-icons
  

引入和使用

import { Icon } from 'react-native-elements'
<Icon name='rowing' />

使用react-native-vector-icons

1. 编辑 android/app/build.gradle
2. 添加以下配置（如果想要使用字体图标得使用以下的配置）

   project.ext.vectoricons = [
       //如果想添加自定义字体的话添加下面的代码
       //如果不想添加自定义字体就不需要使用这个了
       iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
   ]
   
   // 在最上面只添加这一句话就可以成功显示图标
   apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
   

3. 重启项目
4. 添加代码 如

   import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
   
   const icon = <FontAwesome5 name={'comments'} />;
   

5. 如果想要输入框左边加图标

   import { Input } from 'react-native-elements';
   // 不同的图标只要更换不同的name就可以了
   <Input
     placeholder='请输入手机号码'
     leftIcon={{ type: 'font-awesome', name: 'phone'}}
    />
   

6. 代码

<Input
  placeholder="请输入手机号码"
  maxLength={11}
  keyboardType="phone-pad"
  value="15581763785"
  // 改变里面的字体颜色
  inputStyle={{color: '#333'}}
  onChangeText={this.phoneNumberChangeText}
  errorMessage={false ? '' : '手机号码格式不正确'}
  onSubmitEditing={this.phoneNumberSubmitEditing}
  leftIcon={{
    type: 'font-awesome',
    name: 'phone',
    color: '#ccc',
    size: 20,
  }}
/>