react native常用组件

date: 2018.03.05; modification:2018.03.22

目录:

1 常用UI控件

1.1 自带Button

import { Button } from 'react-native';

<Button
    style={{}}
    title="xxxLearn More"
    onPress={xxxonPressLearnMore}
    color="#4080f0"
    accessibilityLabel="xxxLearn more about this purple button"
/>

文档: https://reactnative.cn/docs/0.51/button.html#content

1.2 自定义button(支持长按)

<TouchableHighlight
    style={styles.custButton}
    onPress={() => { console.log('TouchableHighlight pressed'); }}
    onLongPress={() => { console.log('TouchableHighlight LONG pressed'); }}
>
    <Text style={{color: '#f0f0f0', fontWeight: 'bold', fontSize: 16}}>TouchableHighlight</Text>
</TouchableHighlight>


<TouchableOpacity
    style={styles.custButton}
    onPress={() => { console.log('TouchableOpacity pressed'); }}
    onLongPress={() => { console.log('TouchableOpacity LONG pressed'); }}
>
    <Text style={{color: '#f0f0f0', fontWeight: 'bold', fontSize: 16}}>TouchableOpacity</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
    custButton: {
        backgroundColor: "#4080f0",
        height: 35,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 2,
    },
});

1.3 自带Text

import { Text } from 'react-native';

<Text style={styles.xxxName}>xxxName</Text>

const styles = StyleSheet.create({
        xxxName: {
            color: 'blue',
            fontWeight: 'bold',
            fontSize: 30,
        }
});

1.4 自带文本输入 TextInput

import { TextInput } from 'react-native';

<TextInput
    style={styles.xxxnameInput}
    placeholder='xxxName!'
    onChangeText={(text) => {xxx}}
/>

const styles = StyleSheet.create({
    xxxnameInput: {
        height: 40,
    },
});

文档: https://reactnative.cn/docs/0.51/textinput.html#content

1.5 自带 Switch

import{ Switch } from 'react-native'

<Switch
    style={{}}
    value={this.state.switchOn}
    onValueChange={(value) => this.setState({switchOn: value})}
/>

文档: https://reactnative.cn/docs/0.51/switch.html

1.6 自带复选框 Checkbox

import{ CheckBox } from 'react-native'

<CheckBox
    style={{}}
    value={this.state.checked}
    onValueChange={(value) => this.setState({checked: value})}
/>

文档: https://reactnative.cn/docs/0.51/checkbox.html#content

1.7 自带滑动条 Slider

import{ Slider } from 'react-native'

<Slider
    style={{width: 240}}
    value={this.state.sliderValue}
    onValueChange={(value) => this.setState({sliderValue: value})}
/>

文档: https://reactnative.cn/docs/0.51/slider.html#content

1.8 Loading指示器

1.8.1 rn自带ActivityIndicator

(在redux流程中用dipatch触发的话, 可能会报componentWillMount废弃的警告)

import { ActivityIndicator } from 'react-native';

<ActivityIndicator size='large' color='#888888' />

文档:

1.8.2 带覆盖功能(overlay)的loading指示器

(坐标稍微有点不准, 有可能需要加个空View补位一下)

yarn add react-native-loading-view

import LoadingView from 'react-native-loading-view';

<View style={{height: 20}} />
<LoadingView loading={true} overlay={true} />

文档: https://www.npmjs.com/package/react-native-loading-view

1.9 图标(react-native-vector-icons)

这个据说用的比较多. 也比较全.

安装:

yarn add react-native-vector-icons
react-native link
重新运行: react-native run-android

如果报错: Error: While resolving module react-native-vector-icons/MaterialIcons, the Haste package react-native-vector-icons was found. However the module FontAwesome could not be found within the package. ...

方法解决: rm ./node_modules/react-native/local-cli/core/fixtures/files/package.json 然后重新react-native run-android 另外, 之后每次yarn add 一个新的模块, 有可能这个错误就有出来了, 所以需要再rm一下.

注意: react-native link会把字体文件自动拷贝到(也可能是其他目录): android/app/src/main/assets/fonts/ 这些字体文件会在显示icon的时候用到. 但是这个目录是不在git本来的仓库中的, 所以如果不想每次git检出代码后都react-native link的话, 可以把它上传到git.

用法:

<Icon name="rocket" size={30} color="#ace" />

// 带图标的按钮
<Icon.Button name="rocket" backgroundColor="#48c" onPress={() => {console.log('button pressed');}}>
    Icon Button
</Icon.Button>

文档: https://github.com/oblador/react-native-vector-icons/blob/master/README.md

1.10 Pickers

1.10.1 自带选择器Picker

有两种可选模式: * dialog(对话框形式): 显示一个模态(覆盖在页面上层)对话框. 默认选项. * dropdown(下拉框形式): 以选择器所在位置为锚点展开一个下拉框.

import{ Picker } from 'react-native'

<Picker
    selectedValue={this.state.picked}
    onValueChange={(value) => this.setState({picked: value})}
>
    <Picker.Item label="React" value="react" />
    <Picker.Item label="Native" value="native" />
</Picker>

文档: https://reactnative.cn/docs/0.51/picker.html#content

1.11 提示信息 Toast

(非标签)

yarn add react-native-root-toast;

import Toast from 'react-native-root-toast';

// 这不是一个标签, 直接调用类方法即可.
Toast.show('This is a message');

文档: https://github.com/magicismight/react-native-root-toast

1.12 自带对话框 Alert

Android与IOS通用的用法可以提供最多3个选择按钮:

    Alert.alert(
        'Alert Title',
        'My Alert Msg',
        [
            {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
            {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
            {text: 'OK', onPress: () => console.log('OK Pressed')},
        ],
        { cancelable: false }
    );

文档: https://reactnative.cn/docs/0.51/alert.html#content

1.13 通知栏提醒(Notifications) react-native-notifications

该模块可以支持本地触发的提醒以及Push Notification.

安装:

yarn add react-native-notifications

对于安卓, 还需要:

  1. 在项目目录的: android/settings.gradle中添加:

    include ':reactnativenotifications' project(':reactnativenotifications').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-notifications/android')

  2. 在项目目录的: android/app/build.gradle(注意不是android/build.gradle)中添加:

    dependencies { ... // 在此添加一行: compile project(':reactnativenotifications') ... }

  3. 在项目的: android/app/src/main/java/com/awesomeproject/MainApplication.java中添加:

    import com.wix.reactnativenotifications.RNNotificationsPackage;

    ...

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            // ...
            // 在此添加一行:
            new RNNotificationsPackage(MainApplication.this)
        );

2 其他组件

这里还列出了其他一些在网站找的组件, 不过本人没试用过. 先记下来, 以备不时之需.

2.1 rn常用组件 {{{

================================================================================
常用ui控件套装:
https://github.com/avocode/nachos-ui/blob/master/README.md      // 控件都看着不错, 但是测试时好像是和官方自带的控件冲突, 用不了.
https://github.com/react-native-training/react-native-elements  // 没看出有太大用. 感觉原生加少量单一功能的第三方控件就都代替了.
https://nativebase.io/  // demo展示的感觉不够清晰, 所以没用过.
https://github.com/Trixieapp/react-virgin/blob/master/README.md // 各种组件集合(看上去不错没有试过)

带标题的输入框 // 看着挺好的, 不过我装上不能用, 程序跑都跑不起来.
https://github.com/evblurbs/react-native-md-textinput/blob/master/README.md

================================================================================
Form生成器, 包括: name, password, picker等. 可以用来学习研究.
https://www.npmjs.com/package/react-native-form-builder
https://www.npmjs.com/package/react-native-forms
https://www.npmjs.com/package/react-native-form-generator      (Picker DatePicker TimePicker Input Link Separator Switch)

复选框
https://github.com/crazycodeboy/react-native-check-box/blob/master/README.md

自动完成的输入框
https://github.com/l-urence/react-native-autocomplete-input/blob/master/README.md

圆形动作按钮(类似桌面悬浮框)
https://github.com/geremih/react-native-circular-action-menu/blob/master/README.md

类似分类设置的视图
https://github.com/Purii/react-native-tableview-simple/blob/master/README.md

带图标的侧滑菜单
https://github.com/shoumma/react-native-off-canvas-menu/blob/master/README.md

字母排序列表(如通讯录)
https://github.com/i6mi6/react-native-alphabetlistview/blob/master/README.md

下拉刷新列表
https://github.com/syrusakbary/react-native-refresher/blob/master/README.md

支持”拖拽刷新”与“加载更多”的列表
https://github.com/FaridSafi/react-native-gifted-listview

时间线列表
https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/README.md

弹出列表选择器
https://github.com/d-a-n/react-native-modal-picker/blob/master/README.md

手势识别
https://github.com/johanneslumpe/react-native-gesture-recognizers/blob/master/README.md

步骤指示器(如购买/退货流程)
https://github.com/24ark/react-native-step-indicator/blob/master/README.md

较丰富的通知提示
https://github.com/KBLNY/react-native-message-bar/blob/master/README.md

手势密码
https://github.com/Spikef/react-native-gesture-password/blob/master/README.md

占位符
https://github.com/mfrachet/rn-placeholder/blob/master/README.md

各种弹出对话框(看上去不错)
https://github.com/instea/react-native-popup-menu/blob/master/README.md

涂鸦板
https://github.com/jgrancher/react-native-sketch/blob/master/README.md

本身带进度条的按钮
https://github.com/jacklam718/react-native-button-component/blob/master/README.md

各种形式的单选按钮
https://github.com/ArnaudRinquin/react-native-radio-buttons/blob/master/README.md

好像是二维码
https://github.com/cssivision/react-native-qrcode/blob/master/README.md

对话框(含确认,选择列表等,功能不错,但是只有安卓)
https://github.com/aakashns/react-native-dialogs/blob/master/README.md

气球弹出框
https://github.com/jeanregisser/react-native-popover/blob/master/README.md

下拉菜单
https://github.com/sohobloo/react-native-modal-dropdown/blob/master/README.md

下拉
https://github.com/alinz/react-native-dropdown/blob/master/README.md

带长按的按钮
https://github.com/APSL/react-native-button/blob/master/README.md

滑动条(调节音量等)
https://github.com/jeanregisser/react-native-slider/blob/master/README.md

弹出对话框
https://github.com/jacklam718/react-native-popup-dialog

选择进度条
https://github.com/joinspontaneous/react-native-loading-spinner-overlay/blob/master/Readme.md

多标签
https://github.com/aksonov/react-native-tabs/blob/master/README.md

图表
https://github.com/capitalone/react-native-pathjs-charts/blob/master/README.md

可折叠组件
https://github.com/oblador/react-native-collapsible/blob/master/README.md

圆形进度条
https://github.com/bgryszko/react-native-circular-progress/blob/master/README.md

日期和地点选择器
https://github.com/beefe/react-native-picker/blob/master/README.md

日期时间选择器(非日历)
https://github.com/xgfe/react-native-datepicker/blob/master/README.md

复杂一些的list,可以分级,可以拖动排序删除
https://github.com/aksonov/react-native-tableview/blob/master/README.md

旋转木马
https://github.com/phil-r/react-native-looped-carousel/blob/master/README.md

旋转木马效果
https://github.com/archriss/react-native-snap-carousel/blob/master/README.md

各种选择特效
https://github.com/maxs15/react-native-spinkit/blob/master/README.md

幻灯片效果
https://github.com/race604/react-native-viewpager/blob/master/README.md

图表(曲线,柱状,饼状等)
https://github.com/tomauty/react-native-chart/blob/master/README.md

折叠
https://github.com/jmurzy/react-native-foldview/blob/master/README.md

进度条
https://github.com/oblador/react-native-progress/blob/master/README.md

动作按钮(支持一系列动作)
https://github.com/mastermoo/react-native-action-button/blob/master/README.md

灯箱(类似于在网页中点击图片放大查看)
https://github.com/oblador/react-native-lightbox/blob/master/README.md

图片幻灯片
https://github.com/leecade/react-native-swiper/blob/master/README.md

图片选择器
https://github.com/react-community/react-native-image-picker/blob/develop/README.md

图片选择器
https://github.com/ivpusic/react-native-image-crop-picker/blob/master/README.md

好像是弹出框
https://github.com/maxs15/react-native-modalbox/blob/master/README.md

文本输入特效
https://github.com/halilb/react-native-textinput-effects/blob/master/README.md

刷出效果(抽屉)
https://github.com/dancormier/react-native-swipeout/blob/master/README.md

动画
https://github.com/oblador/react-native-animatable/blob/master/README.md

SVG
https://github.com/react-native-community/react-native-svg/blob/master/README.md

app介绍
https://github.com/FuYaoDe/react-native-app-intro/blob/master/README.md

背景虚化效果(blur)
https://github.com/react-native-community/react-native-blur/blob/master/README.md

日历
https://github.com/wix/react-native-calendars/blob/master/README.md

gl
https://github.com/gre/gl-react-native-v2/blob/master/README.md

}}}

3 参考资料