小编jui*_*y89的帖子

我习惯于使用 React Native 并尝试使用 reactjs，但是我对自己感到非常沮丧，因为我了解使用 React Native 时 React 是如何工作的，但我无法正确设置组件的样式，因为我不是习惯了css。

我正在使用 ant design UI 框架来帮助我构建一个小型 Web 应用程序，到目前为止，我的导航栏位于应用程序的顶部，但想要在下方设置一个占据屏幕 100% 的图像并具有高度自动设置为纵横比。

我目前正在尝试这个，但它不起作用。

<div className="background">
</div>

//In App.css

.background {
  background-image: url('./assets/main-image.jpg');
  background-size: 'contain';
  width: 100%;
  height: auto;
}

我已经尝试了上述但和其他一些方法，但没有任何效果。看来高度取决于 div 中的内容。例如，如果我在 div 内放置一个 h1 标签，那么我可以看到图像，但高度只有几个像素。

我的图像宽度为 4000 像素，是横向的。我只想能够根据屏幕分辨率动态显示图像。

有人可以指出我正确的方向吗？

谢谢

编辑：我现在已经将我的 css 背景类设置为这个，它几乎就在那里。

  background-image: url('./assets/main-image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;

唯一的问题是现在我在图像下方留下了适当大小的填充，因为它渲染了我的视口的全高

我有一个在 reactjs 中构建的应用程序并响应本机。我的状态中有一个数组，我正在向其中添加图像 uri。

state = {
  images: []
}

问题在于我想在这样的特定索引处将图像 uri 添加到此数组中

state = {
  images: []
}

但是，以上不起作用，有人可以指出我正确的方向吗？

谢谢

我使用下面的代码来交叉两个非常大的数组。由于目前需要很长时间，是否有可能提高其性能。

const arr1 = [  
    {  
       "number":"123",
       "firstName":"John",
       "lastName":"Smith",
       "email":"test1@test.com",
    },
    {  
       "number":"1234",
       "firstName":"Chad",
       "lastName":"Baker",
       "email":"test2@test.com",
    }
];
 
const arr2 = [  
    {  
        "number":"12345",
        "firstName":"Chad",
        "lastName":"Baker",
        "email":"test2@test.com",
    },
    {  
        "number":"123456",
        "firstName":"John",
        "lastName":"Smith",
        "email":"test1@test.com",
    }
]

 let arr3 = arr1.filter(a => arr2.some(b => { return a.firstName == b.firstName && a.lastName == b.lastName}));  
 
 console.log(arr3);