React Native 第六天

18、案例-图片切换

本案例实现的效果是,点击切换上一张按钮切换到上一张图片,下一张切换到下一张图片

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image,    TouchableOpacity} from 'react-native';var Dimensions = require('Dimensions');var {width, height} = Dimensions.get('window');var arr = [    "https://img.alicdn.com/simba/img/TB1zcokRVXXXXbCXVXXSutbFXXX.jpg",    "https://img.alicdn.com/simba/img/TB1QjH4SpXXXXaRXVXXSutbFXXX.jpg",    "https://img.alicdn.com/simba/img/TB1hFFcSXXXXXcgXpXXSutbFXXX.jpg",    "https://img.alicdn.com/simba/img/TB1.PZQSFXXXXXMXXXXSutbFXXX.jpg"];export default class Main extends Component {    constructor(props) {        super(props);        this.state = {            defaultIndex: 0        }    }    changeImg(data) {        var index = this.state.defaultIndex;        if (data == 0) {            //上一张            index--;            if (index == -1) {                return;            }        } else {            //下一张            index++;            if (index > arr.length - 1) {                return;            }        }        this.setState({            defaultIndex: index        });    }    render() {        return (            <View style={styles.container}>                <View style={styles.topView}>                    <View style={styles.imgView}>                        <Image source={{uri: arr[this.state.defaultIndex]}}                               style={styles.img}                        ></Image>                    </View>                    <View style={styles.btnView}>                        {                            this.state.defaultIndex != 0                                ?                                (<TouchableOpacity                                    activeOpacity={0.8}                                    onPress={this.changeImg.bind(this, 0)}>                                    <View style={styles.backgroundView}>                                        <Text style={styles.text}>{'上一页'}</Text>                                    </View>                                </TouchableOpacity>)                                :                                null                        }                        {                            this.state.defaultIndex != (arr.length - 1)                                ?                                ( <TouchableOpacity                                    activeOpacity={0.8}                                    onPress={this.changeImg.bind(this, 1)}                                >                                    <View style={styles.backgroundView}>                                        <Text style={styles.text}>{'下一页'}</Text>                                    </View>                                </TouchableOpacity>)                                :                                null                        }                    </View>                </View>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        flexDirection: 'row',        justifyContent: 'center',        alignItems: 'center'    },    topView: {        height: 300,        width: 300    },    btnView: {        flexDirection: 'row',        justifyContent: 'space-between',        marginTop: 20    },    backgroundView: {        width: 80,        height: 32,        backgroundColor: 'green',        borderRadius: 3,        justifyContent: 'center',        alignItems: 'center'    },    text: {        fontSize: 13,        color: "#fff"    },    imgView: {        width: 300,        height: 200,        borderWidth: 1,        borderColor: '#999'    },    img: {        width: 280,        height: 180,        marginLeft: 10,        marginTop: 10    }});

19、TextInput组件

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TextInput} from 'react-native';export default class Main extends Component {    constructor(props) {        super(props);        this.state = {}    }    render() {        return (            <View style={styles.container}>                <View style={{width: 300}}>                    <TextInput                        autoCapitalize={'none'}                        style={styles.textInput}                        autoCorrect={false}                        autoFocus={true}                        defaultValue={'东医学院'}                        keyboardType={'default'}                        maxLength={5}                        multiline={true}                        returnKeyType={'done'}                        secureTextEntry={true}                    ></TextInput>                </View>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        flexDirection: 'row',        justifyContent: 'center',        alignItems: 'center'    },    textInput: {        borderColor: '#999',        borderWidth: 1,        height:30    }});

20、小案例-自定义按钮

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity} from 'react-native';export default class Main extends Component {    constructor(props) {        super(props);        this.state = {}    }    render() {        return (            <View style={styles.container}>                <TouchableOpacity activeOpacity={0.7}>                    <View style={styles.btnView}>                        <Text style={styles.btnText}>                            {'Button'}                        </Text>                    </View>                </TouchableOpacity>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        flexDirection: 'row',        justifyContent: 'center',        alignItems: 'center'    },    btnView: {        backgroundColor: 'red',        paddingTop: 8,        paddingBottom: 8,        paddingLeft: 15,        paddingRight: 15,        borderRadius: 3    },    btnText: {        color: "#fff",        fontSize: 13    }});

21、制作QQ登录界面

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity,    Image,    TextInput} from 'react-native';var Dimensions = require('Dimensions');var {width, height} = Dimensions.get('window');export default class Main extends Component {    constructor(props) {        super(props);        this.state = {}    }    render() {        return (            <View style={styles.container}>                <View style={styles.imgView}>                    <Image                        source={require("./images/smile.jpg")}                        style={styles.img}                    ></Image>                </View>                <View style={styles.topInputView}>                    <TextInput                        style={styles.inputView}                        placeholder="QQ号码/手机号/邮箱"                    ></TextInput>                </View>                <View style={styles.bottomInputView}>                    <TextInput                        style={styles.inputView}                        placeholder="密码"                    ></TextInput>                </View>                <View style={styles.btnView}>                    <Text style={styles.textStyle}>{'登录'}</Text>                </View>                <View style={styles.serView}>                    <Image source={require("./images/select.png")}                           style={styles.selectImg}                    >                    </Image>                    <Text style={styles.serText}>我已阅读并同意 <Text style={styles.publicColor}>服务条款</Text></Text>                </View>                <View style={styles.bottomView}>                    <Text style={[styles.publicColor, styles.textSize]}>{'无法登录?'}</Text>                    <Text style={[styles.publicColor, styles.textSize]}>{'新用户注册'}</Text>                </View>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: "#ecedf1"    },    publicColor: {        color: "#00aced"    },    img: {        width: 100,        height: 100,        borderRadius: 50    },    imgView: {        marginTop: 50,        alignItems: 'center',    },    topInputView: {        marginTop: 10,        height: 44,        backgroundColor: "#fff",        borderBottomWidth: 1,        borderColor: "#eee"    },    inputView: {        height: 44,        lineHeight: 44,        textAlign: 'center'    },    bottomInputView: {        backgroundColor: "#fff",    },    btnView: {        backgroundColor: "#00aced",        height: 46,        marginTop: 20,        justifyContent: 'center',        alignItems: 'center',        borderRadius: 3,        width: width * 0.92,        marginLeft: width * 0.04    },    textStyle: {        fontSize: 18,        color: "#fff"    },    selectImg: {        height: 20,        width: 20    },    serView: {        marginTop: 20,        flexDirection: 'row',        marginLeft: width * 0.04,        alignItems: 'center'    },    serText: {        marginLeft: 5,        fontSize: 16,        color: "#666"    },    bottomView: {        position: "absolute",        bottom: 15,        flexDirection: 'row',        width: width * 0.92,        marginLeft: width * 0.04,        justifyContent: 'space-between'    },    textSize: {        fontSize: 16    }});