« 上一篇下一篇 »

react-native 下拉菜单 复选框 实现

下拉菜单


 

 

        实现上图所示的效果,首先安装第三方包“react-native-modal-dropdown”

        1. 可以用npm安装,输入命令 npm install react-native-modal-dropdown --save

        2. 安装完毕后,引入此包  import ModalDropdown from 'react-native-modal-dropdown';

        3. 在render函数中写入

        <ModalDropdown        style={{paddingLeft: 17, paddingTop: 6}}        

                        textStyle={{fontSize: 16}}        

                        defaultValue={'请选择故障类型'}        

                        options={['压缩机故障', '电路故障', '风机故障', '不制冷', '其它']}        

                        onSelect={this.onSelectType}/></View>

        4. 其中,onSelect属性接受的是一个func,当选中某一项时会调用这个函数,并且传入两个参数,分别是选中项的id和value。

        onSelectType(index, value){

            if(value == '其它')

                DeviceEventEmitter.emit('Visible', true);

            else        

                DeviceEventEmitter.emit('Visible', false);

         }

        5. 以上的onSelectType函数的例子是实现当选中“其他”选项时,出现一个输入框;选中非“其他”选项时,隐藏输入框的效果。

        用的是触发器:   需要写下面2个函数,并在构造函数componentDidMount()中调用  componentDidMount()才行。

    componentDidMount() {

        this.subscription = DeviceEventEmitter.addListener('Key2', ()=>{        isLogin = 'yes';

        this._bootstrapAsync(); //为了显示出登录的用户名

        this.componentWillUnmount();

    });

           this.subscription = DeviceEventEmitter.addListener('Visible', (i)=>{

            if(i)  //显示、隐藏其它输入框            

                this.setState({visible:50});

            else            

                this.setState({visible:0});

            this.forceUpdate(); //强制刷新页面       

            this.componentWillUnmount();

        }); };

 

    componentWillUnmount() {  //释放监听器    

        this.subscription.remove();

    };

 

复选框

 

    1. 安装第三方包react-native-check-box

    2. 引入import CheckBox from 'react-native-check-box';

    3. 在render函数中写

        <CheckBox onClick={()=>{    this.setState({isChecked_1:!this.state.isChecked_1}); }}

        isChecked={this.state.isChecked_1}

        isIndeterminate={false}

        rightText={"压缩机故障"}/>

    4. 记得要在state中添加对应的选中状态变量“isChecked_1”。