ReactNative小技巧集锦

写代码过程中遇到的一些小问题，随手记录一下～

1.更新state中的对象数组

直接修改this.state.array[i].xxx是不生效的，需要把state中的对象深拷贝一份，然后通过this.setState()来更新。我们可以用lodash来优雅地完成这一步骤：

import _ from 'lodash';
change(index, value) {
  let temp = _.cloneDeep(this.state.array);
  temp[index].xxx = value;
  this.setState({ data: temp });
}

还有一种方式是使用immutability-helper这个工具库，但是有人做过测试，性能比lodash慢56%，这里就不推荐了。

2.动态更改组件样式中的某一项

这也比较有用，比如一个列表中的每一项都使用同样的模版和样式，但是我希望背景颜色不同，怎么办？教你一招：

CSS是层叠样式表，所以后面的配置会覆盖前面的，因此只要用StyleSheet.flatten()展开样式，在最后面追加样式就可以了，是不是很方便呢？

3.动态指定Picker数据源

Picker官方的示例是这样的：

 this.setState({language: itemValue})}>
  
  

里面的选项是写死的，那么怎么动态指定数据源呢？参见下面的代码：

 this.setState({language: itemValue})}>
  {this.state.langArray.map((lang, index) =>
      )}

其中langArray是个字符串数组，通过map方法可以遍历该数组，然后逐个添加Picker.Item标签。

4.父子/兄弟控件双向通信

举个最简单的例子：一个容器中包含一个Slider和一个Text，要求拖动Slider的时候更新Text的值。

• 父控件通过callback和获取子控件的数据

export default class Parent extends Component {
  constructor() {
    super();
    this.state = {
      sliderValue: 0,
    };
  }
  onSlide(value) {
    this.setState({ sliderValue: value });
  }
  render() {
    return (
      
         this.onSlide(value)} />
        
      
    );
  }
}

• 子控件通过props获取父控件的数据

class Child1 extends Component {
  render() {
    return (
         {this.props.onSlide(value)}}
        />
    );
  }
}

• 兄弟控件通过父控件中转获取数据（也是读props）

class Child2 extends Component {
  render() {
    return (
        
          {this.props.sliderValue}
        
    );
  }
}

更多文章欢迎关注“鑫鑫点灯”专栏：https://blog.csdn.net/turkeycock
或关注飞久微信公众号：