增加要播放的广告图片

最后更新: 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>

   );

};