RN引导页设计思路

RN 引导页设计思路

**measure()**测量是根据view标签中的ref属性

通过给节点设置ref属性，获取对应的宽高及坐标：

import React, {Component} from "react";
import Button from "@/components/Button";
import {Icons, px2dp} from "@/utils";
import {Text, View, StyleSheet, Image, Modal, Platform, StatusBar} from "react-native";

interface ResourceType {
  cover?: any // 遮盖图片层
  text?: string // 提示文案
  azimuth?: 'left' | 'right' | 'bottom' // 方位（箭头在图片的位置）
  arrowDirec: 1 | 2 | 3 // 箭头图片
  coverStyles?: any // 覆盖图片样式
}

interface Props {
  skip: () => any
  finish: () => any
  visible: boolean
  resourceList: ResourceType[]
}

interface State {
  guideIndex: number
}

// 箭头图片集合
const arrowIcons = {
  1: require('./images/measure_left.png'),
  2: require('./images/measure_right.png'),
  3: require('./images/measure_bottom.png'),
}

// 箭头图片宽高
let arrowStylesInit: any = {
  width: px2dp(94),
  height: px2dp(82),
}

class GuideModal extends Component<Props, State> {

  state = {
    guideIndex: 0
  }

  next = () => {
    this.setState({
      guideIndex: this.state.guideIndex + 1
    })
  }

  render() {
    const {guideIndex} = this.state;
    const {skip, finish, visible, resourceList} = this.props;
    if (!visible) {
      return null;
    }
    // Android状态栏高度 - modal在Android下面状态栏没有算进去 此处需要减掉状态栏的高度
    const STATUS_BAR_HEIGHT: any = Platform.OS === 'android' ? StatusBar.currentHeight : 0;
    const resource = resourceList[guideIndex];
    const arrowIcon = arrowIcons[resource.arrowDirec]
    // 覆盖图样式
    const coverStyles = {...resource.coverStyles};
    // 箭头图样式
    const arrowStyles = {...arrowStylesInit};
    coverStyles.top = coverStyles.top - STATUS_BAR_HEIGHT;
    let textTop: number = 0;
    let btnTop: number = 0;
    switch (resource.azimuth) {
      case 'right':
        arrowStyles.top = (coverStyles.height) / 2;
        arrowStyles.left = coverStyles.width;
        textTop = coverStyles.top + coverStyles.height + arrowStyles.height / 2;
        btnTop = textTop + 40;
        break;
      case 'left':
        arrowStyles.top = (coverStyles.height) / 2;
        arrowStyles.left = -coverStyles.width;
        textTop = coverStyles.top + coverStyles.height + arrowStyles.height / 2;
        btnTop = textTop + 40;
        break;
      case 'bottom':
        // 此类型 箭头图片宽高 不一样
        arrowStyles.width = px2dp(67);
        arrowStyles.height = px2dp(82);
        arrowStyles.top = coverStyles.height;
        arrowStyles.left = coverStyles.left + coverStyles.width / 2;
        textTop = coverStyles.top + coverStyles.height + arrowStyles.height;
        btnTop = textTop + 40;
        break;
      default:
    }
    return (
      <Modal visible={visible} transparent>
        <View style={styles.wrap}/>
        <View style={styles.box}>
          <View style={[styles.content, {...coverStyles}]}>
            <View style={styles.content2}>
              <Image
                source={resource.cover}
                style={[styles.common, {
                  left: 0,
                  top: 0,
                  width: coverStyles.width,
                  height: coverStyles.height
                }]}
              />
              <Image source={arrowIcon} style={[styles.common, {...arrowStyles}]}/>
            </View>
          </View>
          <View style={[styles.common, {top: textTop}]}>
            <Text style={[styles.text]}>{resource.text}</Text>
          </View>
          <View style={[styles.common, styles.btnBox, {top: btnTop}]}>
            {
              guideIndex !== resourceList.length - 1 ?
                <>
                  <Button
                    text="跳过"
                    width={190}
                    height={68}
                    fontSize={26}
                    color='#000022'
                    bgColor='#ffffff'
                    style={styles.skipBtn}
                    onPress={skip}
                  />
                  <Button
                    text="下一步"
                    width={190}
                    height={68}
                    fontSize={26}
                    style={styles.nextBtn}
                    onPress={this.next}
                  />
                </> :
                <Button
                  text="完成"
                  width={190}
                  height={68}
                  fontSize={26}
                  style={styles.nextBtn}
                  onPress={finish}
                />
            }
          </View>
        </View>
      </Modal>
    )
  }
}

const styles = StyleSheet.create({
  box: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    top: 0,
    left: 0,
    alignItems: 'center'
  },
  wrap: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: 'black',
    opacity: .7,
  },
  content: {
    position: 'absolute',
  },
  content2: {
    position: 'relative',
  },
  common: {
    position: 'absolute'
  },
  btnBox: {
    flexDirection: 'row',
  },
  skipBtn: {
    marginRight: px2dp(40),
    borderRadius: px2dp(35)
  },
  nextBtn: {
    borderRadius: px2dp(35)
  },
  text: {
    color: '#ffffff',
    fontSize: px2dp(28)
  }
})

export default GuideModal;

---

import React, {Component} from "react";
import {
  Image,
  StatusBar,
  StyleSheet,
  View,
  DeviceEventEmitter,
  TouchableOpacity,
  ImageBackground,
  Text, ScrollView,
  Modal as CouponModal
} from 'react-native';
import CountAnimated from '@/components/CountAnimated';
import Swiper from 'react-native-swiper';
import {NavigationScreenProps} from 'react-navigation';
import {inject, observer} from 'mobx-react';
import {Icons, initMeasure, px2dp} from '@/utils';
import {PaginationRequest} from "@/utils/types/Pagination";
import BroadcastBanner from '@/components/BroadcastBanner';
import {Modal} from '@/components/Modals';
import Storage from "@/components/Storage";
import {LinkGo} from "@/components/LinkTo";
import {Listener, EventType} from "@/components/DataListener"
import GuideModal from "@/components/GuideModal";


interface Props extends NavigationScreenProps {
  homeStore: any,
  BPublishStore: any
  BCouponStore: any
  navigation: any,
  isShow: boolean,
}

interface navProps {
  navigation?: any;
  focused?: any;
}

@inject('homeStore', 'BPublishStore', 'BCouponStore')
@observer
class Home extends Component<Props> {
  counter: React.RefObject<CountAnimated> = React.createRef()
  static navigationOptions = () => ({
    tabBarLabel: '首页',
    tabBarIcon: (focused: navProps) => (
      <Image

        style={{width: px2dp(44), height: px2dp(40)}}

        source={
          focused.focused ? Icons.HomeOn : Icons.HomeOut
        }
      />
    ),
    tabBarOnPress: ({navigation, defaultHandler}: any) => {
      if (navigation.state.params && navigation.state.params.getNumber) {
        navigation.state.params.getNumber();
      }
      defaultHandler()
    }
  })
  state = {
    banners: [
      {
        type: 'image',
        source: 'introduce',
        url: require('@/assets/images/b_banner1.jpg')
      },
      {
        type: 'image',
        source: 'guarantee',
        url: require('@/assets/images/b_banner2.jpg')
      },
      {
        type: 'image',
        source: 'example',
        url: require('@/assets/images/b_banner3.jpg')
      },
    ],
    isShow: true,
    modalVisible: false,
    resourceList: [],
    guideModalVisible: false
  }
  measureRef1: any = React.createRef();
  cardRefs: any[] = [];
  _navListener: any = null
  listener: any = null;
  listener2: any = null;
  tabList = [
    {label: '待审核', value: 10, color: '#3E6CEB', icon: require('./images/dai_shen_he.png')},
    {label: '处理中', value: 20, color: '#F2A61E', icon: require('./images/chu_li_zhong.png')},
    {label: '待验收', value: 30, color: '#EB7E2A', icon: require('./images/dai_yan_shou.png')},
    {label: '已完成', value: 40, color: '#0CB237', icon: require('./images/yi_wan_cheng.png')},
  ]

  async initPage() {
    this._navListener = this.props.navigation.addListener('didFocus', async () => {
      StatusBar.setBarStyle("light-content", true)
      await this.getOrderCount()
      await this.fetchPullCoupons(); // 必出必须优先调用于 fetchIndexInitCoupon
      await this.fetchIndexInitCoupon();
    })
    this.props.navigation.setParams({
      getNumber: async () => {
        await this.fetchNumber();
      },
    })
    await this.fetchNumber();
  }

  async componentDidMount() {
    await this.initPage();
    this.listener && this.listener.remove();
    this.listener2 && this.listener2.remove();
    this.listener = DeviceEventEmitter.addListener('b/home/closed', data => {
      if (this.state.isShow) {
        this.setState({isShow: false});
      }
    });
    this.listener2 = DeviceEventEmitter.addListener('b/pullCoupons', data => {
      this.fetchPullCoupons();
    });
    this.showMeasure();
  }

  componentWillUnmount() {
    this._navListener.remove();
    this.listener && this.listener.remove();
    this.listener2 && this.listener2.remove();
  }

  // 显示引导页
  showMeasure = () => {
    setTimeout(async () => {
      const refList = [this.measureRef1, ...this.cardRefs];
      const measureList = [
        {
          cover: require('./images/measure_01.png'),
          text: '实名后，发布需求，呼叫师傅上门',
          azimuth: 'bottom',
          arrowDirec: 3
        },
        {
          cover: require('./images/measure_02.png'),
          text: '已发布平台未审核的订单，这里查看',
          azimuth: 'bottom',
          arrowDirec: 3
        },
        {
          cover: require('./images/measure_03.png'),
          text: '通过审核后，在这里选择上门师傅并支付费用',
          azimuth: 'bottom',
          arrowDirec: 3
        },
        {
          cover: require('./images/measure_04.png'),
          text: '师傅完成上门服务后，点击对应订单确认完成服务',
          azimuth: 'bottom',
          arrowDirec: 3
        },
        {
          cover: require('./images/measure_05.png'),
          text: '查看历史完成的订单',
          azimuth: 'bottom',
          arrowDirec: 3
        },
      ]
      const resourceList = await initMeasure(refList, measureList);
      if (resourceList.length) {
        this.setState({
          resourceList,
          guideModalVisible: true,
        });
      }
    }, 200)
  }

  // 引导跳过
  skip = () => {
    this.setState({guideModalVisible: false})
  }

  // 引导完成
  finish = () => {
    this.setState({guideModalVisible: false})
  }

  getRef = (dom: any) => {
    this.cardRefs.push({current: dom})
  }

  // 触发 发放优惠券
  fetchPullCoupons = async () => {
    const {BCouponStore: {pullCouponsAction}} = this.props;
    // 获取发放优惠券（自动领取）
    await pullCouponsAction();
  }

  // 获取是否有新优惠券（弹窗提示）
  fetchIndexInitCoupon = async () => {
    const {BCouponStore: {indexInitCouponAction}} = this.props;
    const {success, data: {isExist}} = await indexInitCouponAction();
    if (success && isExist) {
      this.setState({modalVisible: true})
    }
  }

  async getOrderCount() {
    const {isSuccess} = await this.props.homeStore.fetchOrderCount()
    if (isSuccess) {
      this.counter.current?.refresh()
    }
  }

  // 获取需求数量
  fetchNumber = async () => {
    const {BPublishStore: {fetchRequirementStatusListCount}} = this.props;
    await fetchRequirementStatusListCount();
  }

  // 获取消息轮播
  getPublicNotice = async () => {
    const {homeStore: {fetchPublicNotice}} = this.props;
    let params: PaginationRequest = {
      model: {},
      current: 1, // 这里每次新获取消息的页码不需要加一，因为每次调用都是随机生成（效果跟页码加一一样）
      size: 20,
    }
    return await fetchPublicNotice(params);
  }

  // 去发布需求
  goPublish = async () => {
    Listener("req_click")
    const {navigation} = this.props;
    const userStatus = await Storage.load({key: 'userStatus'});
    if (userStatus === '0') {
      Modal.open(() => {
        navigation.navigate('BRealNameAttestationScreen');
      });
      return false;
    }
    navigation.navigate('BPublishScreen');
  }

  // 去发布中心
  goPublishCenter = (tab: number) => {
    const valueMapToEvent: {
      [key: number]: EventType
    } = {
      10: "wai_click",
      20: "pro_click",
      30: "acc_click",
      40: "ful_click"
    }
    Listener(valueMapToEvent[tab])
    const {navigation, BPublishStore: {saveDemandTab}} = this.props;
    saveDemandTab(tab);
    navigation.navigate('BusinessPublishCenterScreen');
  }

  async goBannerDetail(info: any) {
    LinkGo("BisBannerDetailScreen", {type: info.source, from: "bHomeBanner"});
  }

  goCoupon = () => {
    LinkGo("TicketsScreen", {tab: 1});
    this.setState({modalVisible: false});
  }

  render() {
    const {banners, modalVisible, guideModalVisible, resourceList} = this.state;
    const {BPublishStore: {badgeData}} = this.props;

    return (
      <View style={styles.homeWrap}>
        <View style={styles.swiperWrap}>
          <Swiper
            autoplay
            activeDotColor='rgba(255, 255, 255, 0.8)'
          >
            {
              banners.map((info: any, index: number) => {
                return (
                  <TouchableOpacity
                    key={index}
                    onPress={() => this.goBannerDetail(info)}
                  >
                    <Image style={styles.banner} source={info.url}/>
                  </TouchableOpacity>
                )
              })
            }
          </Swiper>
        </View>
        <View style={styles.marginT}>
          {this.state.isShow ? <BroadcastBanner getData={this.getPublicNotice}/> : <></>}
        </View>
        <ScrollView>
          <View style={[styles.marginT]}>
            <TouchableOpacity onPress={this.goPublish} ref={this.measureRef1}>
              <Image style={styles.publish} source={require('./images/goto_publish.png')}/>
            </TouchableOpacity>
          </View>
          {
            this.tabList.map((t: any, index: number) => (
              <View style={styles.marginT}>
                <TouchableOpacity onPress={() => this.goPublishCenter(t.value)} key={index} ref={this.getRef}>
                  <ImageBackground
                    source={require('./images/background.png')}
                    style={styles.backGroundBase}
                    imageStyle={styles.backGroundImage}
                  >
                    <View style={styles.left}>
                      <Image style={styles.icon} source={t.icon}/>
                      <Text style={styles.title}>{t.label}</Text>
                    </View>
                    <View style={styles.right}>
                      <Text style={[styles.number, {color: t.color}]}>{badgeData[t.value]}</Text>
                      <Image style={styles.rightIcon} source={Icons.arrowRight}/>
                    </View>
                  </ImageBackground>
                </TouchableOpacity>
              </View>
            ))
          }
          <TouchableOpacity onPress={() => {
            LinkGo("TicketsScreen")
          }}>
            <Image style={styles.coupons} source={require('./images/claim_coupons.png')}/>
          </TouchableOpacity>
        </ScrollView>
        <CouponModal
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            this.setState({modalVisible: false})
          }}
        >
          <View style={styles.mask}/>
          <View style={styles.couponContent}>
            <View style={styles.couponBox}>
              <Image style={styles.couponTip} source={require('./images/couponTip.png')}/>
              <TouchableOpacity style={styles.couponButton} onPress={this.goCoupon}>
                <Image style={styles.couponShow} source={require('./images/button.png')}/>
              </TouchableOpacity>
              <TouchableOpacity style={styles.closeButton} onPress={() => {
                this.setState({modalVisible: false})
              }}>
                <Image style={styles.closeImg} source={require('./images/closed.png')}/>
              </TouchableOpacity>
            </View>
          </View>
        </CouponModal>
        <GuideModal
          skip={this.skip}
          finish={this.finish}
          resourceList={resourceList}
          visible={guideModalVisible}
        />
      </View>
    )
  }
}

export default Home;

const styles = StyleSheet.create({
  homeWrap: {
    alignItems: 'center',
    backgroundColor: '#F0F2F5',
    height: '100%'
  },
  swiperWrap: {
    width: '100%',
    height: px2dp(316),
    overflow: 'hidden'
  },
  banner: {
    width: '100%',
    height: px2dp(316)
  },
  content: {
    alignItems: "center"
  },
  marginT: {
    marginTop: px2dp(24)
  },
  publish: {
    width: px2dp(690),
    height: px2dp(138),
    borderRadius: px2dp(10)
  },
  backGroundImage: {
    zIndex: 0,
    position: 'absolute',
    left: undefined,
    bottom: undefined,
    right: 0,
    top: 0,
    height: px2dp(100),
    width: px2dp(690),
  },
  backGroundBase: {
    width: px2dp(690),
    height: px2dp(100),
    backgroundColor: '#ffffff',
    borderRadius: px2dp(10),
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: px2dp(28),
    paddingRight: px2dp(28),
    borderColor: '#E2E2E2',
    borderWidth: px2dp(1)
  },
  left: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  right: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  icon: {
    width: px2dp(44),
    height: px2dp(44),
    marginRight: px2dp(16)
  },
  title: {
    fontSize: px2dp(30),
    color: '#000022',
  },
  number: {
    fontSize: px2dp(30),
    fontWeight: 'bold'
  },
  rightIcon: {
    width: px2dp(10),
    height: px2dp(19),
    marginLeft: px2dp(10)
  },
  coupons: {
    width: px2dp(690),
    height: px2dp(154),
    marginTop: px2dp(24),
    borderRadius: px2dp(10)
  },
  mask: {
    width: '100%',
    height: '100%',
    backgroundColor: 'black',
    opacity: .5,
    position: 'absolute',
    top: 0,
    left: 0,
  },
  couponTip: {
    width: px2dp(584),
    height: px2dp(810),
  },
  couponShow: {
    width: px2dp(450),
    height: px2dp(80),
  },
  couponContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  couponBox: {
    position: 'relative'
  },
  couponButton: {
    position: 'absolute',
    bottom: px2dp(42),
    left: px2dp(66),
  },
  closeButton: {
    position: 'absolute',
    top: px2dp(260),
    right: px2dp(26),
  },
  closeImg: {
    width: px2dp(40),
    height: px2dp(40)
  }
})