ReactNative小技巧集锦

栏目: 服务器 · 发布时间: 5年前

内容简介：版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/TurkeyCock/article/details/86487671

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

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

或关注飞久微信公众号： ReactNative小技巧集锦

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

CLR via C#

Jeffrey Richter / 周靖 / 清华大学出版社 / 2015-1-1 / CNY 109.00

《CLR via C#（第4版）》针对CLR和.NET Framework 4.5进行深入、全面的探讨，并结合实例介绍了如何利用它们进行设计、开发和调试。全书5部分共29章。第Ⅰ部分介绍CLR基础，第Ⅱ部分解释如何设计类型，第Ⅲ部分介绍基本类型，第Ⅳ部分以核心机制为主题，第Ⅴ部分重点介绍线程处理。通过本书的阅读，读者可以掌握CLR和.NET Framework的精髓，轻松、高效地创建高性能......一起来看看《CLR via C#》这本书的介绍吧!

码农工具