react-native-wxui

A UI package for React Native , both available on iOS and Android

Intallation

npm i react-native-wxui --save

Usage : Check the included example for more options.

• Form
• ListView
• Button
• Loading
• Success
• Fail
• ActionSheet
• Alert
• Dialog
• SearchBar
• PopMenuBox
• LoadingPlaceholder
• TimePickerBox
• FilterBar

Form

import { Form } from 'react-native-wxui';
class extends Component {
  //...
  _handleChange = (formData, fieldRef) => {
        //formData: {
        //  ref: value
        //}
        console.log('FormData: ', formData);
        console.log(fieldRef + ' has changed');
  }
  //...
  render() {
    return (
            <ScrollView style={styles.container}>
                <Form.Form onFieldChange={this._handleChange}>
                    <Form.Separator label="Separator" />
                    <Form.InputField label="InputField" ref="InputField1"
                        placeholder="placeholder"
                        iconLeft={
                            <Image source={require('./icon.png')} style={styles.iconLeft} />
                        }
                    />
                </Form.Form>
             </ScrollView>
  }
}

ListView

import { Form } from 'react-native-wxui';
class extends Component {

    //...

    _onFetch = (page = 1, callback, options) => {
        setTimeout(() => {
            let data = [];
            for (var i = 0; i < 10; i++) {
                data.push('title' + (Math.random()*100).toFixed(0));
            }
            callback(data, {
                allLoaded: true,
            })
        }, 2000)
    }

    _renderRow = (rowData, sectionID, rowID, highlightRow) => {
        return (
            <View style={styles.rowContainer}>
                <Text style={{marginLeft: 15}}>{rowData}</Text>
            </View>
        )
    }

    render() {
        return (
            <ListView
                ref={listView => this.listView = listView}
                renderRow={this._renderRow}
                fetchData={this._onFetch}
                pagination={true}
                refreshable={true}
                autoLoad={true} 
                style={styles.container}/>
        )
    }
}

Button

Usage:

<Button style={{backgroundColor: 'red'}} textStyle={{fontSize: 18}}>
  Hello!
</Button>

inline：

<Button style={{backgroundColor: 'blue'}}>
  <View style={styles.nestedViewStyle}>
    <Text style={styles.nestedTextStyle}>Nested views!</Text>
  </View>
</Button>

API

| Prop | Type | Description | |------|------|-------------| | onPress | func | Function to execute when the onPress event is triggered. | | onPressIn | func | Function to execute when the onPressIn event is triggered. | | onPressOut | func | Function to execute when the onPressOut event is triggered. | | onLongPress | func | Function to execute when the onLongPress event is triggered. | | textStyle | TextStylePropTypes | The StyleSheet to apply to the inner button text. | | disabledStyle | TextStylePropTypes | The StyleSheet to apply when disabled. | | children | string, number, React.Element,or array | The child nodes to render inside the button. If child is string or number, it will be rendered inside of a <Text> element with textStyle applied if present. Multiple children are allowed (array).| | isLoading | bool | Renders an inactive state dimmed button with a spinner if true. | | isDisabled | bool | Renders an inactive state dimmed button if true. | | activeOpacity | Number | The button onpressing transparency (Usually with a point value between 0 and 1). | | activityIndicatorColor | string | Sets the button of the ActivityIndicatorIOS or ProgressBarAndroid in the loading state. | | background | TouchableNativeFeedback.propTypes.background | Android only. The background prop of TouchableNativeFeedback. |

API

| Prop | Type | Description | |------|------|-------------| | onPress | func | onPress事件被触发时执行的方法 | | onPressIn | func | onPressIn事件被触发时执行的方法 | | onPressOut | func | onPressOut事件被触发时执行的方法 | | ``onLongPress`` | ``func`` | ``onLongPress``事件被触发时执行的方法| | ``textStyle`` | ``TextStylePropTypes`` | 应用在按钮文本的样式 | | ``disabledStyle`` | ``TextStylePropTypes`` | 按钮被禁用时的样式 | | ``children`` | ``string``, ``number``, ``React.Element``,or ``array`` | 渲染在button里面的子节点.如果子是string或者number,如果它是不隐藏的，那么它会被渲染在元素里面并且应用textStyle，多节点是允许array的| | ``isLoading`` | ``bool`` | 渲染一个“菊花”如果这个属性是true| | ``isDisabled`` | ``bool`` | 按钮变暗如果这个属性是true | | ``activeOpacity`` | ``Number`` | 按钮按下去时候的透明度 | | ``activityIndicatorColor`` | ``string`` | 设置“菊花`”的颜色 | | background | TouchableNativeFeedback.propTypes.background | 仅限安卓. TouchableNativeFeedback的背景属性. |

Loading

import { ProgressHUD } from 'react-native-wxui';
class extends Component {
    //...
    _showLoading = () => {
        ProgressHUD.showLoading('Loading');
        setTimeout(ProgressHUD.hideLoading, 1000);
    }
    //...
}

Success

import { ProgressHUD } from 'react-native-wxui';
class extends Component {
    //...
    _showSuccess = () => {
        ProgressHUD.showSuccess('Success');
    }
    //...
}

Fail

import { ProgressHUD } from 'react-native-wxui';
class extends Component {
    //...
    _showFail = () => {
        ProgressHUD.showFail('Fail');
    }
    //...
}

ActionSheet

import { showActionSheet } from 'react-native-wxui';
class extends Component {
    //...
    _showActionSheet = () => showActionSheet({
        buttons: ['option1', 'option2', 'Cancel'],
        highlightedIndex: 0, //set index to -1 for none highligeted
        message: 'message here'
    }, (index) => {
        console.log('index ' + index + ' pressed');
    })
    //...
}

Alert

import { showAlert } from 'react-native-wxui';
class extends Component {
    //...
    _showAlert = () => showAlert({
        title: 'title here',
        message: 'message here'
    }, () => {
        console.log('confirmed')
    }, () => {
        console.log('canceled')
    })
    //...
}

Dialog

import { showDialog } from 'react-native-wxui';
class extends Component {
    //...
    _showDialog = () => showDialog({
        title: 'title here',
        message: 'message here'
    }, (text) => {
        console.log('confirmed: ' + text)
    }, () => {
        console.log('canceled')
    })
    //...
}

SearchBar

import { SearchBar } from 'react-native-wxui';
        <SearchBar
            autoFocus={true}
            placeholder="placeholder"
            value={this.state.text}
            onChange={(event) => {
                if (this.state.text === event.nativeEvent.text) return;
                this.setState({ text: event.nativeEvent.text });
            }} />
        <SearchBar
            editable={true}
            fullWidth={true}
            onPress={() => {
                console.log('SearchBar Pressed')
            }} />

PopMenuBox

import { PopMenuBox } from 'react-native-wxui';


        showPopMenuBox({
                    buttons: buttons
                },
                    (index) => {
                        console.log(index);
                    })

LoadingPlaceholder

import { LoadingPlaceholder } from 'react-native-wxui';


    render() {
        return (
            <View style={styles.container}>
                <LoadingPlaceholder/>
            </View>
        )
    }

TimePickerBox

import { TimePickerBox } from 'react-native-wxui';


        showTimePickerBox('', (date, time) => {
            console.log(date, time)
        }, () => {
            console.log('timePickerBox canceled')
        })

    

TimePickerBox

import { FilterBar } from 'react-native-wxui';

const conditions = [
    { options: ['option1', 'option2', 'option3', 'option4', 'option5'], imageSource: require('./icon.png'), imageSelectedSource: require('./icon.png') },
    { options: ['option1', 'option2', 'option3', 'option4', 'option5'], imageSource: require('./icon.png'), imageSelectedSource: require('./icon.png') },
    { options: ['option1', 'option2', 'option3', 'option4', 'option5'], imageSource: require('./icon.png'), imageSelectedSource: require('./icon.png') }
];


  render() {
        return (
            <View style={styles.container}>
                <FilterBar conditions={conditions} onFilterChange={filters => {
                    this.setState({ filters })
                }} />
            </View>
        )
    }