1.0.7 • Published 4 years ago

react-native-cardview-wayne v1.0.7

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

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

属性

NameTypeDescPlatform
cardElevationNumberthe elevation of the card viewIOS、Android
maxCardElevationNumberif not set, equals the cardElevation defaultAndroid
radiusNumberthe border radius of the card viewIOS、Android
backgroundColorStringthe background color of the card viewIOS、Android
styleObjectset style of the card viewIOS、Android
setPreventCornerOverlapBoolean是否使用PreventCornerOverlapAndroid
setUseCompatPaddingBoolean是否使用CompatPadding 设置内边距Android