【原创】东方耀reactnative 视频20之-picker组件和箭头函数

最新推荐文章于 2021-11-15 18:42:20 发布

wirenc

最新推荐文章于 2021-11-15 18:42:20 发布

阅读量337

点赞数

本文链接：https://blog.csdn.net/wirenc/article/details/52557158

版权

重点在对es6的初步了解

onchange＝{{value1,value2} ＝ this.setstate(({language:lang, value2:value2})})

/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
‘use strict’;

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
Image,
Picker,
TouchableOpacity,
View
} from ‘react-native’;

class demo2 extends Component {
constructor(props){
super(props);
this.state = {
language:null,
};
}
render() {

return (

    <View style={[styles.flex,{marginTop:45}]}>


      <Text> Picker component</Text>
      <Picker
      selectedValue={this.state.language}
      onValueChange={lang => this.setState({language:lang})}
      mode ="dialog"
      style={{color:'#f00'}}
   >


   <Picker.Item label="java" value="java" />
   <Picker.Item label="javaScript" value="javaScript" />
   <Picker.Item label="rn language" value="rn" />

{this.state.language}

    </View>

);

}

class MyImage extends Component{

//source={{uri:this.state.imgs[this.state.count]}}  网络图片

//source={require('./xiaoman2016_24.png')}   本地图片
render(){

    return(
        <View style={[styles.flex,{alignItems:'center'}]}>

            <View style={styles.image}>

                <Image style={styles.img}
                    resizeMode="contain"
                      // source={{uri:this.state.imgs[this.state.count]}}
                        source ={require('./baidu.png')}
                    />

            </View>


            <View style={styles.btns}>


                <TouchableOpacity onPress={this.goPreview.bind(this)}><View style={styles.btn}><Text>上一张</Text></View></TouchableOpacity>

                <TouchableOpacity onPress={this.goNext.bind(this)}><View style={styles.btn}><Text>下一张</Text></View></TouchableOpacity>

            </View>


        </View>
    );
}


goPreview(){
    var count=this.state.count;
    count--;
    if(count>=0){
        this.setState({
            count:count,
        });
    }
}

goNext(){
    var count=this.state.count;
    count++;
    if(count<this.state.imgs.length){
        this.setState({
            count:count,
        });
    }
}

}

const styles = StyleSheet.create({

});

AppRegistry.registerComponent(‘demo2’, () => demo2);