增加要播放的广告图片
最后更新: 2019/9/26本节内容讲解如何将机器人在进行巡逻过程的页面修改为要展示的广告图片,实现机器人在移动中播放广告图片的效果。
将下方要增加的广告图片数据,添加到巡逻过程页面中:
<Image
source={require('../../../img/navigation/leading/man_00.png')}
style={{
width: 80,
height: 80,
}}
/>
添加完成后即可实现机器人在移动中播放广告图片,完成后的代码如下所示:
public getShowCuriseContentView = (centerText: string): React.ReactNode => {
return (
<View
style={{
width: '100%',
height: '100%',
alignItems: 'center',
position: 'absolute',
zIndex: 100
}}
>
<Image
source={require('../../../img/icon_cruise_cap.png')}
style={{
position: 'absolute',
zIndex: 1,
width: 480 / 3.5,
height: 319 / 3.5,
marginTop: 400 / 3.5
}}
/>
<View
style={{
alignItems: 'center',
justifyContent: 'center',
marginTop: 1414 / 3.5,
width: '100%',
position: 'absolute',
zIndex: 1
}}
>
<Image
source={require('../../../img/navigation/leading/man_00.png')}
style={{
width: 80,
height: 80,
}}
/>
<Text style={{ fontSize: 150 / 3.5, color: 'white' }}>
{centerText}
</Text>
</View>
</View>
);
};