通过style实现react图片禁止拖动

可以通过CSS样式来禁止React中的图片拖动。具体来说，可以使用`user-drag`和`user-select`属性来实现。以下是一个示例代码：

function MyComponent() {
  return (
    <div>
      <img
        src="https://example.com/my-image.jpg"
        alt="My Image"
        style={{ userDrag: 'none', userSelect: 'none' }}
      />
    </div>
  );
}

在上面的代码中，我们在`<img>`元素上设置了`userDrag`和`userSelect`属性，并将它们的值都设置为`none`，这样就可以禁止图片的拖动和选择行为。

注意，这种方法只能禁止用户通过鼠标拖动和选择图片。如果用户使用键盘或其他设备来操作页面，这种方法可能无效。

相关问题

react禁止选中图片边框

可以使用CSS中的outline属性来禁止图片被选中时显示的边框。具体做法是给图片添加如下的CSS样式：

img {
  outline: none;
}

这样就可以禁止图片被选中时显示边框了。如果你想要更加精细的控制，可以使用CSS伪类`:focus`来控制图片在被选中时的样式，如下所示：

img:focus {
  outline: none;
}

这样就可以只在图片被选中时禁止显示边框。

reactnative 实现图片居中

要实现React Native中的图片居中，你可以在父容器中使用Flexbox布局，然后将图片的alignSelf属性设置为'center'。以下是一个示例代码：

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    alignSelf: 'center',
  },
});

const CenteredImage = ({ source }) => (
  <View style={styles.container}>
    <Image source={source} style={styles.image} />
  </View>
);

export default CenteredImage;

在这个示例中，父容器使用flexbox布局，使得它的子元素在水平和垂直方向都居中。然后，将图片的alignSelf属性设置为'center'，使得图片本身也居中。