Skip to content

caigehui/react-native-wxui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-wxui

Travis Travis

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

WARNING: this repo is deprecated.

Intallation

npm i react-native-wxui --save

Usage : Check the included example for more options.

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,如果它是不隐藏的,那么它会被渲染在<Text>元素里面并且应用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>
        )
    }
        

    

Releases

No releases published

Packages

No packages published