1、Images:
①静态图片资源:
- <Image source={require('./my-icon.png')} />
- // 错误
- var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
- <Image source={require('./' + icon + '.png')} />
- // 正确
- var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
- <Image source={icon} />
②使用混合App的图片资源:
如果你在编写一个混合App(一部分UI使用React Native,而另一部分使用平台原生代码),也可以使用已经打包到App中的图片资源(通过Xcode的asset类目或者Android的drawable文件夹打包)
- <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
- // 正确
- <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
- style={{width: 400, height: 400}} />
- // 错误
- <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
④资源属性是一个对象
- <Image source={{uri: 'something.jpg'}} />
- <Image source={...}>
- <Text>Inside</Text>
- </Image>