1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

import React, {Component} from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  Image,

  ScrollView,

  CameraRoll,

} from 'react-native';

//照片获取参数

var fetchParams = {

  first: 6,

  groupTypes: 'All',

  assetType: 'Photos'

}

//默认应用的容器组件

class App extends Component {

    //构造函数

    constructor(props) {

        super(props);

        this.state = {

            photos: null

        };

    }

    //页面的组件渲染完毕（render）之后执行

    componentDidMount() {

      var _that = this;

      //获取照片

      var promise = CameraRoll.getPhotos(fetchParams)

      promise.then(function(data){

              var edges = data.edges;

              var photos = [];

              for (var i in edges) {

                  photos.push(edges[i].node.image.uri);

              }

              _that.setState({

                  photos:photos

              });

      },function(err){

          alert('获取照片失败！');

      });

    }

    //渲染

    render() {

      var photos = this.state.photos || [];

      var photosView = [];

      for(var i = 0; i < 6 ; i += 2){

        photosView.push(

          <View key={i} style={styles.row}>

            <View style={styles.flex}>

              <Image resizeMode="stretch" style={styles.image} source={{uri:photos[i]}}/>

            </View>

            <View style={styles.flex}>

              <Image resizeMode="stretch" style={styles.image} source={{uri:photos[i+1]}}/>

            </View>

          </View>

        )

      }

      return (

          <ScrollView>

            <View style={styles.container}>

              {photosView}

            </View>

          </ScrollView>

      );

    }

}

//样式定义

const styles = StyleSheet.create({

  flex:{

   flex:1

 },

 container: {

     flex: 1,

     paddingTop: 30,

     alignItems:'center'

 },

 row:{

   flexDirection: 'row'

 },

 image:{

   height: 120,

   marginTop: 10,

   marginLeft: 5,

   marginRight: 5,

   borderWidth: 1,

   borderColor: '#ddd'

 },

});

AppRegistry.registerComponent('ReactDemo', () => App);