react-native-cardview-wayne

A ReactNative CardView Component for Android and IOS

Usage no npm install needed!

<script type="module">
  import reactNativeCardviewWayne from 'https://cdn.skypack.dev/react-native-cardview-wayne';
</script>

README

react-native-cardview-wayne

开始

$ npm install react-native-cardview-wayne --save or $ yarn add react-native-cardview-wayne

Mostly automatic installation

$ react-native link react-native-cardview-wayne

手动导入

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-cardview-wayne and add RNCardview.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNCardview.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.wayne.cardview.RNCardviewPackage; to the imports at the top of the file
  • Add new RNCardviewPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-cardview-wayne'
    project(':react-native-cardview-wayne').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-cardview-wayne/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
    compile project(':react-native-cardview-wayne')
    

使用方法

import React, {Component} from 'react'
import {
    Text,
    View,
} from 'react-native'

import CardView from 'react-native-cardview-wayne';

// TODO: What to do with the module?
export default class App extends Component {
    render() {
        return (
                <CardView
                style={{marginHorizontal: 12}}
                cardElevation={4}
                maxCardElevation={4}
                radius={10}
                backgroundColor={'#ffffff'}>
                <View style={{padding:10, margin: 12}}>
                    <View>
                        <Text>ReactNative CardView for iOS and Android</Text>
                    </View>
                    <View>
                        <Text>This is test</Text>
                    </View>
                </View>
            </CardView>
        );
    }
};

截图

iOS

iOS

android

android

属性

Name Type Desc Platform
cardElevation Number the elevation of the card view IOS、Android
maxCardElevation Number if not set, equals the cardElevation default Android
radius Number the border radius of the card view IOS、Android
backgroundColor String the background color of the card view IOS、Android
style Object set style of the card view IOS、Android
setPreventCornerOverlap Boolean 是否使用PreventCornerOverlap Android
setUseCompatPadding Boolean 是否使用CompatPadding 设置内边距 Android