27
2017
09

React Native 第十三天

49、react-native-actionsheet

import ActionSheet from 'react-native-actionsheet';

export default class ExampleCode extends Component {

    constructor(props) {
        super(props);

        this.state = {
            defaultValue: ''
        }
    }

    render() {
        var options = ['1', '2', <Text style={{
            //css样式
        }}>{'3'}</Text>];
        return (
            <View style={styles.container}>
                <Text
                    onPress={()=> {
                        //显示ActionSheet
                        this.refs['as'].show();
                    }}
                >{'显示ActionSheet'}</Text>

                <ActionSheet
                    //相当于id
                    ref={'as'}
                    title={'这是标题'}
                    options={options}
                    cancelButtonIndex={0}
                    destructiveButtonIndex={1}
                    //选项的颜色
                    tintColor={'green'}
                    onPress={(index)=> {
                        this.setState({
                            defaultValue: options[index]
                        })
                        alert(options[index]);
                    }}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#F5FCFF",
        alignItems: 'center',
        justifyContent: 'center'
    },
    cellView: {
        borderBottomWidth: 1,
        borderColor: "#ddd",
        padding: 20
    }

});

50、react-native-root-toast

export default class ExampleCode extends Component {

    constructor(props) {
        super(props);

        this.state = {}
    }

    render() {
        return (
            <View style={styles.container}>
                <Text onPress={()=>{
                    Toast.show('要显示的内容', {
                        //时间长短
                        duration: Toast.durations.LONG,
                        //显示位置
                        position: Toast.positions.BOTTOM,
                        shadow: true,   //是否有阴影
                        animation: true,//动态效果
                        hideOnPress: true,//点击提示框是否会消失
                        delay: 0,//提升框显示之前的时间,延迟
                        onShow: () => {
                            // calls on toast\`s appear animation start
                        },
                        onShown: () => {
                            // calls on toast\`s appear animation end.
                        },
                        onHide: () => {
                            // calls on toast\`s hide animation start.
                        },
                        onHidden: () => {
                            // calls on toast\`s hide animation end.
                        }
                    });

                }}>{'显示Toast'}</Text>
            </View>
        )
    }
}

51、封装Toast

export default class MyToast extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text onPress={()=> {
                    Toast.show(this.props.message, {
                        //时间长短
                        duration: Toast.durations.LONG,
                        //显示位置
                        position: Toast.positions.BOTTOM,
                        shadow: true,   //是否有阴影
                        animation: true,//动态效果
                        hideOnPress: true,//点击提示框是否会消失
                        delay: 0,//提升框显示之前的时间,延迟
                        onShow: () => {
                            // calls on toast\`s appear animation start
                            this.props.showEndEvent();
                        },
                        onShown: () => {
                            // calls on toast\`s appear animation end.
                        },
                        onHide: () => {
                            // calls on toast\`s hide animation start.
                        },
                        onHidden: () => {
                            // calls on toast\`s hide animation end.
                        }
                    });
                }}>
                    {this.props.children}
                </Text>
            </View>
        );
    }
}

使用:

import MyToast from './MyToast'

export default class ExampleCode extends Component {

    constructor(props) {
        super(props);

        this.state = {}
    }

    render() {
        return (
            <View style={styles.container}>
               <MyToast
                   message={'这是我的第一个展示'}
                   showEndEvent={()=>{
                       alert("显示结束了");
                   }}
               >{'这是我自定义的组件'}</MyToast>
            </View>
        )
    }
}

52、其他第三方库

react-native-image-picker
react-navigation:https://reactnavigation.org/
常用第三方库:http://www.jianshu.com/p/53ff78168acc

上一篇:Android IPC多进程通信总结 下一篇:android adt 网络请求