簡述

要實現微信性別選擇需要使用兩部分的技術：

　　第一、是自定義彈出框；

　　第二、單選框控件使用；

效果

實現

一、配置彈出框

　　彈出框用的是：react-native-popup-dialog（Git地址：https://github.com/jacklam718/react-native-popup-dialog）

　　具體配置見Git文檔~

二、配置單選框

　　用的是：react-native-elements（Git地址：https://react-native-training.github.io/react-native-elements/API/checkbox/）

　　具體配置見Git文檔~

核心代碼：

import PopupDialog, { DialogTitle } from 'react-native-popup-dialog';<PopupDialogdialogTitle={<DialogTitle title="性別" />}ref={popupDialog => {this.popupDialog = popupDialog;}}width={240}height={170} ><View><View><Viewstyle={{borderBottomWidth: 1,borderColor: '#eee'}}><CheckBoxleftcheckedIcon="dot-circle-o"uncheckedIcon="circle-o"checkedcheckedColor={skin.main}iconRighttitle="男 "textStyle={{ fontSize: 16 }}containerStyle={{backgroundColor: '#fff',borderWidth: 1,marginTop: -5,borderWidth: 0}}onPress={() => {this.popupDialog.dismiss();}}/></View><View><CheckBoxleftcheckedIcon="dot-circle-o"uncheckedIcon="circle-o"checkedColor={skin.main}iconRighttitle="女 "textStyle={{ fontSize: 16 }}containerStyle={{backgroundColor: '#fff',borderWidth: 1,borderWidth: 0}}onPress={() => {this.popupDialog.dismiss();}}/></View></View></View> </PopupDialog>

顯示彈出框：

this.popupDialog.show(); 隱藏彈出框： this.popupDialog.dismiss();

?

總結

以上是生活随笔為你收集整理的react native仿微信性别选择-自定义弹出框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。