QLoadingError Qunar骆驼加载失败组件 >=v1.0.0

渲染出一个带问号的骆驼的组件。

QLoadingError

属性

titleText { string }

骆驼下面显示的第一行文字

默认值: '获取数据失败'

titleStyle { Text.propTypes.style }

标题的样式

注意：此属性的如果传入样式，会以merge的形式覆盖默认样式。

默认值: {fontSize: 14, color: '#333333', marginTop: 8}

hintText { string }

骆驼下面显示的第二行文字

默认值: '请检查一下:网络是否通畅?'

hintStyle { Text.propTypes.style }

提示内容的样式

注意：此属性的如果传入样式，会以merge的形式覆盖默认样式。

默认值: {fontSize: 14, color: '#333333', marginTop: 8}

buttonText { string }

骆驼下面显示的按钮的文字

默认值: 努力加载中...

buttonStyle { View.propTypes.style }

按钮的样式

注意：此属性的如果传入样式，会以merge的形式覆盖默认样式。

默认值: {width: 220, height: 40, backgroundColor: '#1ba9ba', marginTop: 8, borderColor: '#1ba9ba', borderRadius: 2, borderWidth: 2, justifyContent: 'center', alignItems: 'center'}

buttonTextStyle { Text.propTypes.style }

按钮文本的样式

注意：此属性的如果传入样式，会以merge的形式覆盖默认样式。

默认值: {fontSize: 18, color: '#ffffff',}

hideTitle { bool }

是否隐藏骆驼下面的第一行文字，默认为false不隐藏

默认值: false

hideHint { bool }

是否隐藏骆驼下面的第二行文字，默认为false不隐藏

默认值: false

hideButton { bool }

是否隐藏骆驼下面的按钮，默认为false不隐藏

默认值: false

renderButton { function }

() => renderable

渲染按钮的方法，用来实现自定义的按钮（可以使用Button组件来渲染，它提供了更多的配置和更多的状态）

返回值: element 用来渲染按钮内容的JSX

onPress { function }

(event) => void

点击骆驼下面的按钮时调用

方法参数:

参数名 类型 描述 版本
event event 点击事件
示例

import React, {QLoadingError, View, Button} from 'qunar-react-native';

module.exports = {
    title: 'QLoadingError',
    scroll: true,
    examples: [{
        subtitle: 'Default settings',
        render: () => {
            return <QLoadingError onPress={() => alert('Press')}/>
        },
    }, {
        subtitle: 'Custom Content',
        render: () => {
            return <QLoadingError titleText='title' hintText='hint' buttonText='button' onPress={() => alert('Press2')}/>
        },
    }, {
        subtitle: 'Hide Content',
        render: () => {
            return <QLoadingError hideTitle hideHint hideButton onPress={() => alert('Press3')}/>
        },
    }, {
        subtitle: 'Custom Style',
        render: () => {
            return <QLoadingError
                        titleStyle={{fontSize: 18, color: 'red'}}
                        hintStyle={{fontSize: 16, color: 'green', marginTop: 10}}
                        buttonStyle={{borderWidth: 1, borderColor: '#1ba9ba', backgroundColor: '#ffffff', borderRadius: 5}}
                        buttonTextStyle={{color: '#1ba9ba'}}
                        onPress={() => alert('Press4')}/>
        },
    }, {
        subtitle: 'Custom Render Function',
        render: () => {
            return <QLoadingError renderButton={() => <Button />} onPress={() => alert('Press5')}/>
        },
    }],
};