React Native 第十三天

来源：互联网发布：软件体系结构课程设计编辑：程序博客网时间：2024/06/06 04:54

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

阅读全文

0 0