实现点击首页标题跳转闲聊页面

最后更新: 2019/9/26

我们介绍如何实现点击首页标题文案“点击前往闲聊”跳转到闲聊页面的功能。

 

1.按照目录APP/biz/template/home打开HomeEvent.ts

在跳转事件中增加跳转到闲聊的跳转事件chat

export enum HomeEvent {
   waitTimeout = 10100001,
   stop,
   return,
   locationlist,
   chat
}

 

2.按照目录app/biz/triggers,打开HomeTrigger.ts

处理上述新增的跳转事件,实现首页到闲聊页面的跳转

public trigger = (protocol: TriggerProtocol): void => {
       console.log("HomeTrigger",protocol.eventId)
       switch (protocol.eventId) {
           case HomeEvent.locationlist:
               this._trigger(TriggerChannel.destination, protocol);
               break;
           case HomeEvent.chat:

               this._trigger(TriggerChannel.chat, protocol);
               break;
           default:
               this._trigger(TriggerChannel.wakeUp, protocol);
       }
   };

3.按照目录app/biz/home,打开StandardView.tsx

在render方法中增加TouchableOpacity来响应用户的点击来进行跳转

public render(): React.ReactChild | null {
       return (
           <View style={styles.backgroundImage}>
               <TouchableOpacity onPress = {() => this.homeAction.jumpToChat()}>
                   <View 
                       style={{
                           marginTop: 100.3,
                           flexDirection: 'row',
                           alignItems: 'center',
                           justifyContent: 'center'
                       }}
                   >
                       <Image
                           source={require('../../../img/home/home_mic_img.png')}
                           style={{ width: 16, height: 22, margin: 3.7 }}
                       />
                       <Text
                           style={{
                               fontFamily: 'PingFangSC-Regular',
                               fontSize: 22.9,
                               lineHeight: 30.6,
                               color: 'white'
                           }}
                       >
                           {homeStore.getTitleBarContent()}
                       </Text>
                   </View>
               </TouchableOpacity>

           ......
           </View>
       );
   }

4.按照目录app/biz/template,打开HomeViewModel.ts

增加如下跳转方法

public jumpToChat = (): void =>{
       this._apiTrigger(HomeEvent.chat,{});
   }

现在点击首页标题文案跳转闲聊页面的功能已完成。