開源一個跨端的卡片式設計(Cards)的組件,在Android中是Material Design中有一種很個性的設計概念,在使用React-Native跨平臺的開發框架中,卡片樣式在IOS平臺通過設置View的樣式就可以實現類似的效果,比如這樣:
<View style={{
shadowOffset: { // 設置陰影偏移量
width: 0,
height: 4
},
shadowRadius: 4, // 設置陰影模糊半徑
shadowOpacity: 0.13, // 設置陰影的不透明度
borderRadius: 10, // 設置圓角
shadowColor: 'rgba(96,96,96,1)' // 設置陰影色
}
{...props}
/>
基於此,此開源組件,在IOS端即採用了RN平臺提供的陰影樣式屬性來實現卡片樣式;在Android端採用Android原生support庫在V7引入的原生CardView UI組件,來實現卡片樣式設計的組件。
Github項目地址: react-native-cardview-wayne
使用:
import RNCardview from 'react-native-cardview-wayne';
export default class App extends Component {
render() {
return (
<CardView cardElevation={4}
maxCardElevation={4}
radius={10}
backgroundColor={'#ffffff'}>
<View style={{padding:10}}>
<View>
<Text>CardView for iOS and Android</Text>
</View>
<View>
<Text>This is test</Text>
</View>
</View>
</CardView>
);
}
};
效果如下:
Android:
ios:
此次重造一個輪子,目的在於學習封裝一個包含原生組件的ReactNative包的開發過程,併發布到npm倉庫。
個人公衆號:君偉說, 歡迎大家關注。