開源ReactNative卡片式(Cards)組件，你值得擁有

開源一個跨端的卡片式設計(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倉庫。

我的公衆號：君偉說， 歡迎你們關注。