以下是簡單返回按鈕組件的代碼,可以自由定義返回圖標(biāo)的顏色,大小,組件樣式
import?React,?{?Component?}?from?'react';
import?{?TouchableOpacity,?Image,?Platform,?useColorScheme?}?from?'react-native';
import?PropTypes?from?'prop-types';
import?{?Actions?}?from?'react-native-router-flux';
import?AntDesign?from?'react-native-vector-icons/AntDesign';
//?簡單返回按鈕
const?BackButton?=?(props)?=>?{
????const?{?onBackBtnClick,?backIconColor,?backIconSize,?containerStyle?=?{}?}?=?props;
????return?(
????????<TouchableOpacity
????????????activeOpacity={0.5}
????????????style={{?paddingHorizontal:?10,?...containerStyle?}}
????????????onPress={onBackBtnClick???onBackBtnClick?:?Actions.pop}
????????>
????????????<AntDesign
????????????????color={backIconColor???backIconColor?:?'#111'}
????????????????size={backIconSize???backIconSize?:?22}
????????????????name={Platform.OS?===?'ios'???'left'?:?'arrowleft'}
????????????/>
????????</TouchableOpacity>
????);
};
BackButton.propTypes?=?{
????onBackBtnClick:?PropTypes.func,
????containerStyle:?PropTypes.object,
????backIconColor:?PropTypes.any,
????backIconSize:?PropTypes.number,
};
export?default?BackButton;
其中用到了PropTypes這個第三方包。主要的作用是通過下面的寫法對你的某一個組件的props中的變量進行類型檢測。
但是我在想能不能不用,這里是否有必要?希望之后的代碼中能讓我有所思考。
Son.propTypes = {
? ? optionalArray: PropTypes.array,//檢測數(shù)組類型
? ? optionalBool: PropTypes.bool,//檢測布爾類型
? ? optionalFunc: PropTypes.func,//檢測函數(shù)(Function類型)
? ? optionalNumber: PropTypes.number,//檢測數(shù)字
? ? optionalObject: PropTypes.object,//檢測對象
? ? optionalString: PropTypes.string,//檢測字符串
? ? optionalSymbol: PropTypes.symbol,//ES6新增的symbol類型
}
【react】利用prop-types第三方庫對組件的props中的變量進行類型檢測 - 外婆的 - 博客園
在看了這篇文章后有一點點小小的思考,倘若如文章所說是為了在JS報錯時避免不知道原因的情況,是否得不償失,字段太多,在下面加那么幾行固然能很好進行類型檢測,避免不知原因的bug,但是有點浪費時間的說