1.0.0 • Published 8 years ago

react-native-sk-picscart v1.0.0

Weekly downloads
1
License
MIT
Repository
github
Last release
8 years ago

react-native-sk-picscart

##What is it

react-native-sk-picscart is a component to show the picture you choose from the device library or directly from the camera. It's easy to add or delete a picture.

Depends on react-native-image-picker

##How to use it

  1. install react-native-image-picker

  2. npm install react-native-sk-picscart@latest --save

  3. Write this in index.ios.js / index.android.js

 'use strict';
 import React, {
   AppRegistry,
   StyleSheet,
   Text,
   View
 } from 'react-native';

 var PicsCart = require('react-native-sk-picscart');

 var test = React.createClass({
   getInitialState: function() {
     return {
       pics: []
     };
   },
   render: function(){
     return (
       <View style={styles.container}>
         <PicsCart
           style={styles.picsCart}
           onChange={this.onPicsChange}
           pics={this.state.pics}
           maxSelection={5}
           />
        <View style={styles.detailBox}>
          {this.state.pics.map(this.renderPicDetail)}
        </View>
       </View>
     )
   },
   renderPicDetail: function(pic, i){
     return (
       <Text key={i}>
        {'\npic' + (i + 1) + ' detail: \n' + JSON.stringify(pic)}
       </Text>
     )
   },
   onPicsChange: function(pics){
     this.setState({pics})
   },
 });


 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#F5FCFF',
   },
   picsCart: {
     marginVertical: 12,
     marginHorizontal: 6,
   },
   detailBox: {
     justifyContent: 'space-around',
   },
 });
 
 AppRegistry.registerComponent('test', () => test);

npm.io

##Properties

Any View property and the following:

PropDescriptionDefault
picsThe selected pictures to show.None
onChangeCallback that is called when the selected pictures changes.None
maxSelectionMax selected picture number.None