导航

    Taro 社区

    Taro

    • 注册
    • 登录
    • 搜索
    • 版块
    • 最新
    • 话题
    • 热门
    • 群组
    1. 主页
    2. yigga
    Y
    • 资料
    • 关注
    • 粉丝
    • 主题
    • 帖子
    • 最佳
    • 群组

    yigga

    @yigga

    0
    声望
    2
    帖子
    502
    资料浏览
    0
    粉丝
    0
    关注
    注册时间 最后登录

    yigga 关注

    yigga 发布的帖子

    • RE: taro编译没问题,但是监听文件修改报错?

      382ae377-89da-4dd9-a35b-6061a40319dd-image.png
      刚才我也出现这个问题

      我通过 npm update 和 npm install 之后解决了。
      583d1755-a75d-49a4-b665-3238642af92b-image.png

      发布在 Taro
      Y
      yigga
    • 新建的redux工程在自定义组件内部@connect 之后 this.props 为空

      bc256242-d7f1-44a2-b16e-d8227ccbbdda-image.png

      在引用自定义组件的页面正常
      a46f2979-686a-446f-ade7-95fe4cd6db91-image.png

      index.tsx

        render() {
          console.log('index',this)
      
          return (
            <View className='index'>
              <SearchBar />
              <TabBar/>
              <View className="videos"></View>
              <NavigateBar />
            </View>
          )
        }
      

      自定义组件.tsx

      import { ComponentClass } from 'react'
      import Taro, { Component, Config } from '@tarojs/taro'
      import { View, Text, ScrollView } from '@tarojs/components'
      import { connect } from '@tarojs/redux'
      
      import { getCate } from '../../actions/category'
      import { add, minus, asyncAdd } from '../../actions/counter'
      
      import './tabBar.less'
      
      // #region 书写注意
      //
      // 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
      // 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
      // 这样才能完成类型检查和 IDE 的自动提示
      // 使用函数模式则无此限制
      // ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
      //
      // #endregion
      
      type PageStateProps = {
        counter: {
          num: number
        },
        category: {
          id: number,
          title: string
        }
      }
      
      type PageDispatchProps = {
        getCate: () => void
        add: () => void
        dec: () => void
        asyncAdd: () => any
      }
      
      type PageOwnProps = {}
      
      type PageState = {}
      
      type IProps = PageStateProps & PageDispatchProps & PageOwnProps
      
      interface Tabbar {
        props: IProps;
        state: {
          deviceWidth: number,
          prevScroll: number,
          currentScroll: number,
          currentTab: number,
          tabList: Array<{
            id: number,
            title: string
          }>
        }
      }
      
      @connect(({ counter, category }) => ({
        counter,
        category,
      }), (dispatch) => ({
        add() {
          dispatch(add())
        },
        dec() {
          dispatch(minus())
        },
        asyncAdd() {
          dispatch(asyncAdd())
        }
      }))
      class Tabbar extends Component {
        constructor() {
          super()
          this.state = {
            deviceWidth: 0,
            prevScroll: 0,
            currentScroll: 0,
            tabList: [],
            currentTab: 0
          }
        }
        /**
       * 指定config的类型声明为: Taro.Config
       *
       * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
       * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
       * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
       */
        config: Config = {
          navigationBarTitleText: '首页'
        }
      
        componentWillReceiveProps(nextProps) {
          console.log(this.props, nextProps)
        }
        componentWillMount() {
          this.setState({
            deviceWidth: Taro.getSystemInfoSync().windowWidth,
          })
        }
        componentDidMount() {
        }
        componentWillUnmount() { }
      
        componentDidShow() { }
      
        componentDidHide() { }
        switchTab(index) {
          const query = Taro.createSelectorQuery().in(this.$scope)
          query.select(`#tab${index}`).boundingClientRect(rect => {
            const elHalfWideth = rect.width / 2
            const elLeft = rect.left
            const deviceWdthHalf = this.state.deviceWidth / 2
            const needScroll = elLeft - deviceWdthHalf + elHalfWideth
            this.setState({
              currentScroll: this.state.prevScroll + needScroll
            })
          }).exec()
          this.setState({
            currentTab: index
          })
        }
        onScroll(e) {
          let distance = e.detail.scrollLeft;
          this.setState({
            prevScroll: distance
          })
        }
        render() {
          console.log('cate', this)
      
          const {
            currentScroll
          } = this.state
          return (
            <ScrollView onScroll={this.onScroll.bind(this)} scrollWithAnimation scrollX scrollLeft={currentScroll} className='tabBar'>
              {/* {
                this.props.category.map(tab => {
                  return (
                    <View key={tab.id} onClick={this.switchTab.bind(this, 0)} className={"tab"} id='tab0'>
                      <Text>{tab.title}</Text>
                    </View>
                  )
                })
              } */}
            </ScrollView>
          )
        }
      }
      
      // #region 导出注意
      //
      // 经过上面的声明后需要将导出的 Taro.Component 子类修改为子类本身的 props 属性
      // 这样在使用这个子类时 Ts 才不会提示缺少 JSX 类型参数错误
      //
      // #endregion
      
      export default Tabbar as ComponentClass<PageOwnProps, PageState>
      
      
      发布在 微信小程序
      Y
      yigga