如何将裁剪图像集中在React Native中
根据文档 ，反应原生的Image组件支持以下resizeModes ：
'cover'，'contain'，'stretch'，'repeat'，'center'
如果图像大于Image分量，则center模式通过对图像进行均匀缩放以使图像的center位于Image分量的center ，从而使图像适合图像。
我想知道是否有黑客或解决scheme，我们可以定义一个自定义点（如0,300）作为一个焦点，这是它的Image视图的中心。
我想实现的目标有点像fresco重点作物，但也应该适用于内部监督办公室。
React-Native有一个内置的API来处理图像裁剪， ImageEditor 。 它使图像裁剪相当简单。 有关示例，请参阅下面的函数。
input的图像采用URI的forms。 图像被裁剪，并提供指向裁剪图像的URI（该图像通过React-Native的ImageStore API进行封装）。 随后使用此URI来显示裁剪的图像，如你所愿。
// Make sure you import ImageEditor from react-native! async cropImage(){ // Construct a crop data object. cropData = { offset:{x:0,y:0}, size:{width:20, height:20}, // displaySize:{width:20, height:20}, THESE 2 ARE OPTIONAL. // resizeMode:'contain', } // Crop the image. try{ await ImageEditor.cropImage(uri, cropData, (successURI) => {Something awesome with successURI!}, (error) =>{console.log('cropImage,',error)} ) } catch(error){ console.log('Error caught in this.cropImage:', error) } } // End of function.
我想你需要这样处理
const CroppedImage = React.createClass({ render() { return ( <View style={[ { overflow: 'hidden', height: this.props.cropHeight, width: this.props.cropWidth, backgroundColor: 'transparent' }, this.props.style ]} > <Image style={{ position: 'absolute', top: this.props.cropTop * -1, left: this.props.cropLeft * -1, width: this.props.width, height: this.props.height }} source={this.props.source} resizeMode={this.props.resizeMode} > {this.props.children} </Image> </View> ); } });
看看这个例子链接