React Native 第十二天

42、WebView

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {}    }    render() {        return (            <View style={{flex: 1}}>                <WebView                    onLoad={()=> {                    }}                    onError={()=> {                    }}                    onLoadStart={()=> {                    }}                    onLoadEnd={()=> {                    }}                    injectedJavaScript={"alert('load)"} //界面加载之前做操作                    style={styles.webViewStyle}                    //source={{uri: "https://www.baidu.com"}}                    source={{html: "<div>html代码</div>"}}                    startInLoadingState={true} //是否第一时间加载网页内容                >                </WebView>            </View>        )    }}

43、Animated(动画)

简单案例

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {            opacity: new Animated.Value(0)        }    }    componentDidMount() {        Animated.timing(this.state.opacity, {            toValue: 1,//目标值            duration: 3000,//动画所用的时间            easing: Easing.linear       //运动方式:线性,匀速        }).start();    }    render() {        return (            <View style={styles.container}>                <Animated.View                    style={{opacity: this.state.opacity}}                >                    <Image                        source={require("./images/home.png")}                        style={styles.img}                    ></Image>                </Animated.View>            </View>        )    }}

44、(Animated)动画同步与异步进行

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {            opacity: new Animated.Value(0),            rotation: new Animated.Value(0)        }    }    componentDidMount() {        var tinimg = Animated.timing;        //同步       /* Animated.parallel(['opacity', 'rotation'].map((data)=> {            return tinimg(this.state[data], {                toValue: 1,                duration: 3000,                easing: Easing.linear            });        })).start();*/        //异步进行 队列方式        Animated.sequence(['opacity', 'rotation'].map((data)=> {            return tinimg(this.state[data], {                toValue: 1,                duration: 3000,                easing: Easing.linear            });        })).start();    }    render() {        return (            <Animated.View                style={{                    opacity: this.state.opacity,                    transform: [{                        rotateX: this.state.rotation.interpolate({                            inputRange: [0, 1],                            outputRange: ['0deg', '360deg']                        })                    }]                }}            >                <Image                    source={require("./images/home.png")}                    style={styles.img}                ></Image>            </Animated.View>        )    }}

45、Linking

提供了一个通用的接口来与传入和传出的APP链接进行交互

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {}    }    componentDidMount() {    }    render() {        return (            <View style={styles.container}>                <Text                    onPress={this.onPress.bind(this, "https://www.baidu.com")}                >                    {'打开网址'}                </Text>                <Text                    onPress={this.onPress.bind(this,'smsto:10086')}                >                    {'发送短信'}                </Text>                <Text                    onPress={this.onPress.bind(this,'tel:10086')}                >                    {'打电话'}                </Text>                <Text                    onPress={this.onPress.bind(this,'mailto:[e-mail]')}                >                    {'发邮件'}                </Text>            </View>        )    }    onPress(value) {        Linking.canOpenURL(value).then((data)=> {            if (data) {                return Linking.openURL(value);            } else {                alert("error")            }        })    }}

46、NetInfo

NetInfo模块可以获知设备联网或离线的状态信息,判断网络状态

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {            isCon: false,            conInfo: null,            isFree: null        }    }    componentDidMount() {        //获取当前网络是否连接        NetInfo.isConnected.fetch().done((b)=> {            this.setState({                isCon: b            });        });        //获取当前网络的信息        NetInfo.fetch().done((info)=> {            this.setState({                conInfo: info            })        })        //仅限Android        NetInfo.isConnectionExpensive().then((state)=> {            this.setState({                isFree: state            })        })        //监听网络状态        NetInfo.isConnected.addEventListener('checkCon', this.checkCon.bind(this));        //监听网络信息        NetInfo.addEventListener('changeCon', this.changeCon.bind(this));    }    checkCon(b) {        this.setState({            isCon: b        })    }    changeCon(info) {        this.setState({            conInfo: info        })    }    componentWillUnmount() {        //监听网络状态        NetInfo.isConnected.removeEventListener('isConnected', this.isCon);        //监听网络信息        NetInfo.removeEventListener('changeCon', this.changeCon);    }    render() {        return (            <View style={styles.container}>                <Text>{'是否连接网络:' + this.state.isCon}</Text>                <Text>{'连接网络的信息:' + this.state.conInfo}</Text>                <Text>{'是否计费:' + this.state.state}</Text>            </View>        )    }}

47、下拉加载

export default class ExampleCode extends Component {    constructor(props) {        super(props);        var ds = new ListView.DataSource({            rowHasChanged: (r1, r2) => r1 !== r2        });        this.state = {            ds: ds,            dataSource: '',            isShow: false        }    }    componentDidMount() {        var arr = [];        for (var i = 0; i < 20; i++) {            arr.push('cell' + i);        }        this.setState({            dataSource: this.state.ds.cloneWithRows(arr)        });    }    render() {        return (            <View style={styles.container}>                {                    this.state.dataSource.length != ''                        ?                        (    <ListView dataSource={this.state.dataSource}                                       renderRow={(data)=> {                                           return (                                               <View style={styles.cellView}>                                                   <Text>{data}</Text>                                               </View>                                           )                                       }}                                       refreshControl={                                           <RefreshControl                                               refreshing={this.state.isShow}                                               //Android                                               colors={['blue']}                                               //Android                                               progressBackgroundColor={'green'}                                               //Android                                                ProgressViewOffset={0}                                               onRefresh={()=> {                                                   this.setState({                                                       isShow: true                                                   });                                                   setTimeout(()=> {                                                       this.setState({                                                           isShow: false                                                       });                                                   }, 3000)                                               }}                                           />                                       }                        ></ListView>) : null                }            </View>        )    }}

48、上拉加载 下拉刷新

export default class ExampleCode extends Component {    constructor(props) {        super(props);        var ds = new ListView.DataSource({            rowHasChanged: (r1, r2) => r1 !== r2        });        var newData = this.createCell();        this.state = {            ds: ds,            dataSource: ds.cloneWithRows(newData),            isShow: false        }    }    createCell() {        var arr = [];        for (var i = 0; i < 20; i++) {            arr.push('cell' + i);        }        return arr;    }    render() {        return (            <View style={styles.container}>                {                    this.state.dataSource.length != ''                        ?                        (    <ListView                            onEndReachedThreshold={50}                            onEndReached={()=> {                                //加载更多新数据                                var moreData = this.createCell();                                this.setState({                                    dataSource: this.state.ds.cloneWithRows(moreData)                                })                            }}                            dataSource={this.state.dataSource}                            renderRow={(data)=> {                                return (                                    <View style={styles.cellView}>                                        <Text>{data}</Text>                                    </View>                                )                            }}                            refreshControl={                                <RefreshControl                                    refreshing={this.state.isShow}                                    //Android                                    colors={['blue']}                                    //Android                                    progressBackgroundColor={'green'}                                    //Android                                    ProgressViewOffset={0}                                    onRefresh={()=> {                                        this.setState({                                            isShow: true                                        });                                        setTimeout(()=> {                                            this.setState({                                                isShow: false                                            });                                        }, 3000)                                    }}                                />                            }                        ></ListView>) : null                }            </View>        )    }}