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

时间:2016-03-16 22:35:02

标签: ios react-native

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

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

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

似乎没有办法将选定的值/索引绑定到状态变量,例如,或以编程方式设置所选的值/索引。我能看到的最接近的是使用selectedIndex prop预先选择一个索引。这在React Native中实际可行吗?

1 个答案:

答案 0 :(得分:4)

您可以将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>
    );
  }
});