有没有办法以编程方式更改 React Native 中的分段控制IOS 选择选项

Question

我有一个SegmentedControlIOS组件，它在两个值（百分比和金额）之间切换，它确定用户输入的数字是百分比值还是金额。 我定义如下：

<SegmentedControlIOS 
  tintColor={"#425E6A"} 
  values={this.state.optionNames} 
  onValueChange={this.setSelectedOption.bind(this)}
  selectedIndex={0}
/>

当用户在同一屏幕上点击设置了预定义百分比的其他按钮时，SegmentedControl 自动翻转到百分比是有意义的。 但是，我在文档中看不到任何能够做到这一点的方法。

例如，似乎没有办法将选定的值/索引

绑定到状态变量，或者以编程方式设置选定的值/索引。 我能看到的最接近的是预先选择带有所选索引属性的索引。 这在 React Native 中真的可行吗？

Answer 1

您可以将 selectedIndex 道具与状态一起使用。您需要确保在 onChange 事件中更新您的状态，以使其与用户选择的内容保持同步。然后，您只需使用要以编程方式选择的索引调用setState，它就可以工作了！

下面是一个可以执行所需操作的小示例：

React.createClass({
  getInitialState() {
    return {
      selectedIndex: 0,
    };
  },
  render() {
    return (
      <View>
        <SegmentedControlIOS
          values={['One', 'Two']}
          selectedIndex={this.state.selectedIndex}
          onChange={(event) => {
            this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
          }}
        />
        <TouchableWithoutFeedback onPress={() => {
          this.setState({selectedIndex: 1});
        }}>
          <Text>Toggle</Text>
        </TouchableWithoutFeedback>
      </View>
    );
  }
});