React Native 动态引入本地图片(循环引入)

方法很简单,只需要定义好图片数组,接着进行循环即可。

constructor(props) {
    super(props);
    this.state = {
        scrollImage:[
            {
                img:require('../../images/OHR.jpg')
            },
            {
                img:require('../../images/th.jpg')
            },
            {
                img:require('../../images/OHR.StokePero.jpg')
            }
        ]
    };
  }

需要在页面属性中直接定义好require。不能写成下面的形式:

 scrollImage:[
       {
           img:'../../images/OHR.jpg'
       },
       {
           img:'../../images/th.jpg'
       },
       {
           img:'../../images/OHR.StokePero.jpg'
       }
   ]

如果写这种方式,等下需要用到此数据时,获取到的img不是路径字符串,也就是不带路径两端的单引号,而使用require()时,里面的路径必须带上单引号。

接着在使用时遍历即可:

for (let index = 0; index < this.state.scrollImage.length; index++) {
   var imageItem = this.state.scrollImage[index].img;
    ImageArr.push(
        <Image key={index} source={imageItem} style={style.image}/>
    )
}
React Native 中,使用 Three.js 渲染器需要使用 `react-native-webgl` 库,而该库中的 WebGLRenderer 并不支持设置渲染器的位置。不过我们可以通过将 canvas 元素包裹在一个 View 中,再设置该 View 的样式来实现类似的效果。 具体的实现方式如下: ```jsx import React, { useRef, useEffect } from 'react'; import { View } from 'react-native'; import { GLView } from 'react-native-webgl'; import * as THREE from 'three'; const Example = () => { const rendererRef = useRef(null); useEffect(() => { if (rendererRef.current) { const renderer = rendererRef.current.getContext('webgl', { antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); const animate = () => { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); } }, []); return ( <View style={{ position: 'absolute', top: 50, left: 50 }}> <GLView style={{ width: 300, height: 300 }} ref={rendererRef} /> </View> ); }; export default Example; ``` 在上面的代码中,我们将 `GLView` 组件(即 Three.js 渲染器的 canvas 元素)放在了一个 `View` 组件中,并设置了该 `View` 组件的样式来控制渲染器的输位置。需要注意的是,由于 `GLView` 组件是异步加载的,因此我们需要在 useEffect 中等待它被加载完毕之后才能对其进行操作。 最后,我们通过 `renderer.render(scene, camera)` 方法将场景渲染到屏幕上,并通过 `requestAnimationFrame` 实现了动画效果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

聂大哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值