我有一个SegmentedControlIOS组件,可以在两个值(百分比和金额)之间切换,这可以确定用户输入的数字是百分比值还是金额。我将其定义如下:
<SegmentedControlIOS
tintColor={"#425E6A"}
values={this.state.optionNames}
onValueChange={this.setSelectedOption.bind(this)}
selectedIndex={0}
/>
当用户在设置了预定义百分比的同一屏幕上点击另一个按钮时,SegmentedControl会自动翻转到百分比。但是,我在文档中没有看到任何方法可以做到这一点。
似乎没有办法将选定的值/索引绑定到状态变量,例如,或以编程方式设置所选的值/索引。我能看到的最接近的是使用selectedIndex prop预先选择一个索引。这在React Native中实际可行吗?
答案 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>
);
}
});