Taro初体验 踩坑小结教程

       如今小程序已经充斥这我们的生活，腾讯阿里头条都在分食这个大蛋糕，虽说他们之前的实现大同小异，但是一份代码可以编译成不同平台的话 还是给我们开发带来了很大的便利性，所以今天就入手了京东的Taro。

注意：taro基于react语法规范开发的，所以之前没接触过react的小伙伴，希望这篇文章能够对你有所帮助

1.安装及使用

安装之前需要node的环境，没有环境的小伙伴自行配置一下
因为国内的网络环境使用npm 安装的时候可能会报错 建议使用yarn

⚠️yarn install 出错
yarn ERR! Maximum call stack size exceeded
降级 ： yarn install -g npm@5.4.0
升级 ： yarn install -g npm 升级到最新版

2.数据

之前小程序都是使用data,这里面使用state

this.setState({
      name: '捡豆豆'
});

这个地方就有个注意点：在设置完数据之后立即使用name 此时name的值还是上一次的,它设置数据是异步的，所以要在它回调之后才能拿到修改的值

this.setState({
      name: '捡豆豆'
    },()=>(
      console.log('name',name)
));

3.图片

本地图片的使用有两种方式 improt require

import bottomListIv2 from '../../../res/image/example2.png'
<Image src={require('../../../res/image/icon_look.png')}/>

⚠️<Image src={'../../../res/image/icon_look.png'}/>这种写法是可以编译引用的 如下写法是不可以的，因为没有预编译，打包之后是找不的 所以推荐以上两种方式⬆️⬆️

this.setState({
      url: '../../../res/image/icon_look.png'
});
<Image src={this.state.url}/>

4.组件传值

子组件通过this.props拿到主组件传递过来的值

//主组件
class Index extends Component {
  this.state = {
        name: "捡豆豆",
        title: 'taro教程'
      }
  render() {
    return (
      <View>
        <Name name={this.state.name} />
        <Link site={this.state.title} />
      </View>
    );
  }
}

//子组件
class Name extends Component {
  render() {
    return (
      <View>{this.props.name}</View>
    );
  }
}
 
class Link extends Component {
  render() {
    return (
      <View>
        {this.props.title}
      </View>
    );
  }
}

看到这里 小伙伴知道怎么从主组件拿值 那是否有疑问，主组件怎么调用子组件呢🤔️
两种方式
1. Ref 可以用来绑定到 render() 输出的任何组件上
1⃣️用字符串创建 ref

<TabView ref='tabView' />

//加载更多的时候拿到子组件 调用它的加载方法
onReachBottom() {
    var tab = this.refs.tabView
    tab.onReachBottom();
  }

2⃣️通过函数创建 ref（推荐）

<TabView ref={c=>this.TabView=c}/>

//加载更多的时候拿到子组件 调用它的加载方法
onReachBottom() {
    if(this.TabView){
      this.TabView.onReachBottom()
    }
  }

2.props掉用方法传递自身

//子组件tabview中
componentWillMount() {
    this.props.onInitTabView(this)
  }

//主组件中
<TabView onInitTabView={c=>this.TabView=c}/>

onReachBottom() {
    if(this.TabView){
      this.TabView.onReachBottom()
    }
  }

5.事件处理

class Index extends Component{
    state = {name:'Hello world!'}
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <View>
                <p>hello</p>
                {/* 通过 bind() 方法传递参数。 */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </View>
        );
    }
}

⚠️此处有两个注意的点：
1⃣️onClick={this.preventPop(this.state.name)} 直接传值 这种方式虽然也能接收到值 但是不允许的
2⃣️onClick={this.preventPop.bind(this,this.state.name)}传值时 事件对象 e 要排在所传递参数的后面 接收的时候要注意

6.条件渲染

function UserGreeting(props) {
  return <h1>欢迎回来!</h1>;
}

function GuestGreeting(props) {
  return <h1>请先注册。</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
 
render(
  return (<Greeting isLoggedIn={false} />
  )
)

true && expression 总是返回 expression，而 false && expression 总是返回 false。因此可以&&来做条件渲染

<View>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          您有 {unreadMessages.length} 条未读信息。
        </h2>
      }·
</View>

7.列表遍历

<ScrollView className='top_sv' scrollX>
          {topList.map(list => (
            <View className='top_list_item' key>
              <Image className='top_list_item_bg' src={list.image}></Image>
              <Text className='top_list_item_title'>{list.foodname}</Text>
              <View className='top_list_item_bottom'>
                <Image className='top_list_item_avatar' src={list.url}></Image>
                <Text className='top_list_item_name'>{list.name}</Text>
              </View>
            </View>
          ))}
 </ScrollView>

小伙伴们如果这篇文章对你学习taro有用的话，赶紧关注一下 后面再继续更新❤️❤️