javascript - React Native - 良好实践 : SegmentedControlIOS with ListView

Question

使用 ListView 实现 SegmentedControllIOS 的最佳实践是什么？我尝试了三种解决方案，所有示例都包含带有两个段和两个 ListView 的 SegmentedControllIOS。我邀请您讨论这三个的性能(也许有人可以提出其他更好的解决方案)。从我的 Angular 来看，示例是按最有效的顺序给出的。

1。两个独立的dataSource，一个ListView(改变ListView的dataSource)

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ds1: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2,}),
      ds2: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2,}),
      index: 0,
    };
  }

  render() {
    return (
      <View>
        <SegmentedControlIOS
          selectedIndex={this.state.index}
          values={['ds1', 'ds2']}
          onChange={() => this.setState({index: (this.state.index+1)%2})}
        />
        <ListView dataSource={this.state.index ? this.state.ds2 : this.state.ds1} />
      </View>
    );
  }
}

2。两个独立的dataSource和两个独立的ListView

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ds1: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2,}),
      ds2: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2,}),
      index: 0,
    };
  }

  render() {
    return (
      <View>
        <SegmentedControlIOS
          selectedIndex={this.state.index}
          values={['ds1', 'ds2']}
          onChange={() => this.setState({index: (this.state.index+1)%2})}
        />
        {this.state.index === 0 ?
          (<ListView dataSource={this.state.ds1} />)
        :
          (<ListView dataSource={this.state.ds2} />)
        }
      </View>
    );
  }
}

3。一个dataSource，cloneWithRows on dataSource on change index

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ds: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2,}),
      ds1: ['some', 'data'],
      ds2: ['some', 'other', 'data'],
      index: 0,
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange() {
    this.setState({
      ds: this.state.ds.cloneWithRows(this.state.index ? this.ds1 : this.ds2),
      index: (this.state.index+1)%2,
    })
  }

  render() {
    return (
      <View>
        <SegmentedControlIOS
          selectedIndex={this.state.index}
          values={['ds1', 'ds2']}
          onChange={this.onChange}
        />
        <ListView dataSource={this.state.ds} />
      </View>
    );
  }
}

Answer 1

第三种方式最好。当您使用 cloneWithRows 时，ListView 使用 DataSource 的 rowHasChanged 函数来了解现在需要重新调整哪些行-使成为。由于 ds1 第一行中的 'some' 将匹配 ds2 第一行中的 'some'行将不会被重新呈现。

在第 1 种情况下，您没有利用 DataSource 对象的状态，ListView 会看到它正在尝试呈现完全不同(可能无法比较)的数据资源。

在情况 2 中，您可能会通过切换重量级可滚动组件而获得一些有趣的渲染工件。