React Native - 在相机胶卷中添加边距:1 [英] React Native - Adding margin: 1 in Camera Roll

问题描述

如何在我的相机胶卷中完美添加margin: 1?因为当我在 中添加 margin: 1 时，顺序将不正确.

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.

我想要的结果就像在 Instagram 上一样.左右两边没有边距吧?

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

就像这张图片:

这是我的代码:

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'
}
});

这是我自己的结果:(不要担心黑色边框，我只是没有完美裁剪，我的 Android 模拟器中只有 6 张照片).

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).

建议答案:

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>
); 
}
}

这是另一个问题，边距:1 占据了屏幕的整个宽度，第二行没有边距:

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:

推荐答案

在绘制地图之前，我建议遍历数组的每个部分并添加一个值，说明它是否将放置在右侧、左侧或中央.类似的东西:

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})
}

然后，在渲染图像时:

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

然后添加一个函数:

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

更新:问题是你在 didMount 中定义了 photoFilter 函数.

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

当我说在 componentDidMount 中调用它时，我的意思是:

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})
    }

这篇关于React Native - 在相机胶卷中添加边距:1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！