javascript - 相机胶卷添加borderColor

因此，我想创建一个具有borderColor而不是margin或padding的漂亮的相机胶卷UI，因为它将使图像不适合屏幕宽度。我也不想在图像的右侧和左侧添加borderColor。它就像在Instagram上一样。

这是我要实现的目标：



这是我的代码：

CameraRoll.js

  setIndex = (index) => {
if (index === this.state.index) {
  index = null
}
this.setState({ index });
};

getPhotos = () => {
CameraRoll.getPhotos({
  first: 200,
  assetType: 'All'
})
.then(res => {
  this.setState({
    photos: res.edges,
  });
})
.catch((err) => {
  console.log('Error image: ' + err);
});
};

render() {
return(
  <View style={styles.container}>
    <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>
);
}
}

最佳答案

更改TouchableHighlight或Image的样式，添加borderColor：“ red”，borderWidth：10

setIndex = (index) => {
if (index === this.state.index) {
  index = null
}
this.setState({ index });
};

getPhotos = () => {
CameraRoll.getPhotos({
  first: 200,
  assetType: 'All'
})
.then(res => {
  this.setState({
    photos: res.edges,
  });
})
.catch((err) => {
  console.log('Error image: ' + err);
});
};

render() {
return(
  <View style={styles.container}>
    <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,
              borderColor:"red", borderWidth:10
           }}
            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>
);
}
}

关于javascript - 相机胶卷添加borderColor，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57535681/