React native multi select ，不能 select 多个值

Question

我有一个 api 正在解析成一个对象数组，像这样

[
{flagUrl : 'http://....' , name : India , id : 7},
{flagUrl : 'http://....' , name : USA , id : 2},
{flagUrl : 'http://....' , name : Australia , id : 8},
....
]

然后我使用 https://www.npmjs.com/package/react-native-select-multiple ，这个包从上面 link.

制作一个多 selectable 列表

我想要的是，首先我可以显示用户可以 select 假设两个国家的国家列表（我可以使用提供的道具控制最大 select ）然后我想要当用户转到下一页时，我可以获得用户在上一个屏幕中 selected 的 ID。目前我试图显示相同的内容，它只是我现在可以显示的国家/地区列表，然后我无法获取他们的 ID。这是我到目前为止尝试过的

<SelectMultiple
        items={this.state.countryList.map((x) => x.name)}
        selectedItems={this.state.selectedCountries}
        onSelectionsChange={this.onSelectionsChange}
        maxSelect={2}
        />

我的 countrylist 有上面的数组，这里是我用过的函数

onSelectionsChange = (selectedCountries) => {
    this.setState({ selectedCountries })
  }

和selectedItems在我的状态下只是一个空数组。

所以我只想呈现国家/地区列表，用户 select 中有几个，然后我可以通过 this.props.navigate... 将国家/地区的 selected id 发送到下一个屏幕如果您需要这方面的更多信息，请告诉我。提前致谢:)

Answer 1

您的国家/地区列表的标签和值必须类似于

 <SelectMultiple
     items={this.state.countryList.map((x) => ({ name: x.name, value:x.id })}
     selectedItems={this.state.selectedCountries}
     onSelectionsChange={this.onSelectionsChange}
     maxSelect={2}
 />

onSelectionsChange 方法应该相同

onSelectionsChange = (selectedCountries) => {
    this.setState({ selectedCountries })
}

然后当你想移动到另一个屏幕时

 moveToAnotherPage =() => {
   const { selectedCountries } = this.state;
   const { navigation } = this.props;
   const ids = selectedCountries.map(item => item.value);
   navigation.navigate('ScreenName', {ids});
  }

React native multi select ，不能 select 多个值

React nattive multi select , cant select multiple values

multi-select

react-native