Question

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

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

当用户在设置了预定义百分比的同一屏幕上点击另一个按钮时，SegmentedControl会自动翻转到百分比。但是，我在文档中没有看到任何方法可以做到这一点。

似乎没有办法将选定的值/索引绑定到状态变量，例如，或以编程方式设置所选的值/索引。我能看到的最接近的是使用selectedIndex prop预先选择一个索引。这在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>
    );
  }
});

有没有办法以编程方式更改React Native中的SegmentedControlIOS选择选项？

1 个答案: