下拉菜单
实现上图所示的效果，首先安装第三方包“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”。