在 ImageBackground 中添加需要的变量

如何解决在 ImageBackground 中添加需要的变量

我正在使用 react-native lib 中的 imagebackground。 imagebackground 使用 source={require('asd.png')} 例如。

但我试图在里面添加变量到要求。

const [image,setimage] = useState('./asd.png')

.then(image => {
            setimage(image.path) // gives 'something.png'
          });

<imagebackground source={require(image)></imagebackground> 

但是我遇到了错误。第 122 行无效调用：require(image)

解决方法

// Declare a varible here...
const img = require('./asd.png')  

// Example of a network image
const networkImage = "https://images.pexels.com/photos/799443/pexels-photo-799443.jpeg"  

const [image,setImage] = useState(img) // Use it here like this

// Static Image Usage
<ImageBackground 
    source={image} 
    style={{ flex: 1,resizeMode: 'cover',justifyContent: 'center' }}>
</ImageBackground> 

// Network Image Usage
<ImageBackground 
    source={{uri : networkImage}} 
    style={{ flex: 1,justifyContent: 'center' }}>
</ImageBackground> 

这是使用ImageBackground的正确方法

检查此 Snack 以查看工作示例

另外，查看 docs 以获得更多帮助。

正如文档所说，

// GOOD (this is also correct)
<Image source={require('./my-icon.png')} />;

// BAD (this is wrong...)
var icon = this.props.active
  ? 'my-icon-active'
  : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD (this is correct)
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;