涂鸦api

xiaochouniu1

已于 2023-03-29 20:26:13 修改

阅读量336

点赞数

分类专栏： react 文章标签： javascript vue.js 前端

于 2023-03-07 11:48:04 首次发布

本文链接：https://blog.youkuaiyun.com/xiaochouniu1/article/details/129255706

版权

本文介绍了如何在前端项目中使用涂鸦API，包括修改数据、引用涂鸦tabs、处理后台返回的数据、组件间通信以及在React Native中实现淡入淡出效果。详细讲解了生命周期、配置过程和关键代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生命周期一进来就会运行

  componentDidMount= (newProps: any) => {
   
    console.log(37);
  };

修改数据

先在 this.state进行配置

 constructor(props: RecipePropsType) {
   
    super(props);
    this.state = {
   
      stateActive: 1,  //  进行配置   
      // selectMode: 'cook_mode',
    };
  }

修改

  changeTable = (data: any) => {
   
    // console.log(this.stateActive);
    this.setState({
    stateActive: data });
  };

获取

this.state.stateActive

涂鸦 `Picker` 官网地址

     <Picker
                    style={
   {
             //安卓样式
                      width: cWidth,
                      height: cx(211),
                      backgroundColor: 'transparent',
                    }}
                    itemStyle={
   {
       // ios 样式
                      width: cWidth,
                      height: cx(211),
                      fontSize: cx(18),
                      color: '#000000',
                      fontWeight: '500',
                      backgroundColor: 'red',
                    }}
                    textSize={
   cx(18)}
                    itemTextColor="#000000"
                    fontWeight="500"
                    visibleItemCount={
   6}    // 可视区域项目个数
                    selectedValue={
   value}   //选中的数值
                    onValueChange={
   (val) => {
      // 数值改变回调
                     
                    }}
                  >
                    {
   pickData.map((items: any) => (  // 多列选择器
                      <Picker.Item key={
   items.value} value={
   items.value} label