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.动态更改组件样式中的某一项

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

<View style={StyleSheet.flatten([styles.commonStyle, {backgroundColor: item.color}])}></View>

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

3.动态指定Picker数据源

Picker官方的示例是这样的：

<Picker
  selectedValue={this.state.language}
  style={{ height: 50, width: 100 }}
  onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

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

<Picker
  selectedValue={this.state.language}
  style={{ height: 50, width: 100 }}
  onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
  {this.state.langArray.map((lang, index) =>
      <Picker.Item key={index} label={lang} value={lang} />)}
</Picker>

其中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 (
      <View style={styles.container}>
        <Child1 onSlide={(value) => this.onSlide(value)} />
        <Child2 sliderValue={this.state.sliderValue} />
      </View>
    );
  }
}

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

class Child1 extends Component {
  render() {
    return (
        <Slider
          style={styles.child1}
          maximumValue={100}
          step={1}
          onValueChange={(value) => {this.props.onSlide(value)}}
        />
    );
  }
}

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

class Child2 extends Component {
  render() {
    return (
        <TouchableOpacity style={styles.child2}>
          <Text style={styles.text}>{this.props.sliderValue}</Text>
        </TouchableOpacity>
    );
  }
}

更多文章欢迎关注“鑫鑫点灯”专栏： https://blog.csdn.net/turkeycock

或关注飞久微信公众号：