React Native - Adding margin: 1 in Camera Roll

问题:

How to add margin: 1 perfectly in my Camera Roll? Because when I add margin: 1 in my <Image .../> the order will not be in correct order.

The result I want is like in the Instagram. There's no margin in the Left and Right Side, right?

Just like this Image:

Here are my Codes:

render() {
return(
  <View style={styles.container}>
    {/* <SelectedImage source={{uri: this.state.pickedImage}}/> */}
    <Image source={{uri: this.state.pickedImage}} style={styles.image}/>
    <ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
      {this.state.photos.map((photos, index) => {
        return(
          <TouchableHighlight 
            style={{opacity: index === this.state.index ? .5 : 1}}
            onPress={() => this.setState({pickedImage: photos.node.image.uri})}
            key={index}
            underlayColor='transparent'
          >
            <Image
              style={{width: width / 3, height: width /3}}
              source={{uri: photos.node.image.uri}}
              resizeMode='cover'
            />
          </TouchableHighlight>
        );
      })}
    </ScrollView>
  </View>
); 
}
}

const styles = StyleSheet.create({
container: {
 height: '100%',
 width: '100%',
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: 'white'
},
scrollView: {
 flexWrap: 'wrap',
 flexDirection: 'row'
},
scrollViewContainer: {
 flex: 1,
 flexDirection: 'row',
},
 image: {
 width: '100%',
 height: 300,
 backgroundColor: 'black'
}
});

This is the Result on my own: (Dont't bother of the Black Border I just didn't crop perfectly and I have just 6 Photos in my Android Emulator).

Answer Suggested:

componentDidMount() {
this.getPhotos();
this.rightButtonIcon();
requestExternalStoragePermission();

photoFilter = () => {
  var arr = this.state.photos;
  var number = 0;
  arr.forEach((item) => {
    switch(number) {
      case 0: 
        number = 1;
        item.position="left"
      break;
      case 1:
        number = 2;
        item.position="center"
      break;
      case 2: 
        number = 0;
        item.position="right"
      break;
      default:
        return null;
    }
  })
  this.setState({photos: arr})
}
};

 imageStylePositionCalc = (pos) =>{
  if(pos==="left") return {marginRight:1,marginBottom:1}
  if(pos==="center") return {marginRight:1,marginBottom:1}
  if(pos==="right") return {marginBottom:1}
 }

  render() {
return(
  <View style={styles.container}>
    {/* <SelectedImage source={{uri: this.state.pickedImage}}/> */}
    <Image source={{uri: this.state.pickedImage}} style={styles.image}/>
    <ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
      {this.state.photos.map((photos, index) => {
        return(
          <TouchableHighlight 
            style={{opacity: index === this.state.index ? .5 : 1}}
            onPress={() => this.setState({pickedImage: photos.node.image.uri})}
            key={index}
            underlayColor='transparent'
          >
            <Image
              style={[{width: width / 3, height: width /3}, this.imageStylePositionCalc(photos.position)]}
              source={{uri: photos.node.image.uri}}
              resizeMode='cover'
            />
          </TouchableHighlight>
        );
      })}
    </ScrollView>
  </View>
); 
}
}

This is the another Problem, the margin: 1 taking over the full width of the screen and there is no margin in the 2nd row:

回答1:

Before doing the map, I would suggest to go trough every part of the array and add a value that says if it will be placed into the right, left or center. Something like:

photoFilter=()=>{
   var arr=this.state.photos;
   var number=0;
   arr.forEach((item)=>{
      switch (number){
         case 0: 
            number=1;
            item.position="left"
            break;  
         case 1: 
            number=2;
            item.position="center"
            break;  
         case 2: 
            number=0;
            item.position="right"
            break; 
         default:
            return null 
      }
  })
this.setState({photos:arr})
}

then, when rendering the image:

<Image
style={[{width: width / 3, height: width /3},this.imageStylePositionCalc(item.position)]}
source={{ uri: photos.node.image.uri }}
resizeMode="cover"
/>

then add a function:

imageStylePositionCalc=(pos)=>{
  if(pos==="left") return {marginRight:1,marginBottom:1}
  if(pos==="center") return {marginRight:1,marginBottom:1}
  if(pos==="right") return {marginBottom:1}
}

This may not be the best answer but should work

UPDATE: The problem is that you are defining the photoFilter function inside the didMount.

What i meant when i said to call it inside componentDidMount was:

componentDidMount() {
this.getPhotos();
this.rightButtonIcon();
requestExternalStoragePermission();
this.photoFilter
}

photoFilter = () => {
      var arr = this.state.photos;
      var number = 0;
      arr.forEach((item) => {
        switch(number) {
          case 0: 
            number = 1;
            item.position="left"
          break;
          case 1:
            number = 2;
            item.position="center"
          break;
          case 2: 
            number = 0;
            item.position="right"
          break;
          default:
            return null;
        }
      })
      this.setState({photos: arr})
    }

回答2:

I have a solution for your problem, which may although not be the best one because I'm not sure how to get rid of the upper and downer most margin, but whatever.

const styles = StyleSheet.create({
    container: {
        height: '100%',
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    scrollView: {
        flexWrap: 'wrap',
        flexDirection: 'row',
        justifyContent: 'space-between', // This one is new
        marginHorizontal: -3 // This one is new
    },
    scrollViewContainer: {
        flex: 1,
        flexDirection: 'row'
    },
    image: {
        width: '100%',
        height: 300,
        backgroundColor: 'black'
    }
});

/* Rest of the code stays the same, only the image style gets changed to the follwoing */

<Image
    style={{
        width: width / 3,
        height: width / 3,
        margin: 1
    }}
    source={{ uri: photos.node.image.uri }}
    resizeMode="cover"
/>

Hope this helps.