在 React-Native 中连接选择器

Question

是否可以连接两个选择器，以便当第一个有一个名字而第二个有另一个名字时，它会自动分配它们？

例如：用户有 first_name 和 last_name。当用户点击第一个选择器时 select first_name 自动更改第二个选择器中的值 last_name.

Answer 1

当然可以，这是可能的。但是考虑到这两个名字需要一些相互关联的东西。我会给你一个例子，其中 state 处理一个 names 和一个 pickedName 的数组，这是两个选择器将要显示的值。这两个选择器只是简单地映射具有相同值的不同标签。

state={
    pickedName: {
      firstName: '',
      lastName: ''
    },
    names: [
      {
        firstName: 'Pinco',
        lastName: 'Pallino'
      },
      {
        firstName: 'Mario',
        lastName: 'Rossi'
      }
    ]
  }

  render() {
    const { pickedName } = this.state;
    return (
      <View style={styles.container}>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.firstName} value={name} />
          ))}
        </Picker>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.lastName} value={name} />
          ))}
        </Picker>
      </View>
    );
  }

更新： 假设您在屏幕安装期间从数据库中获取名称。你可以这样做：

  state = {
    pickedName: {
      firstName: '',
      lastName: '',
    },
    names: [],
  };

  componentDidMount() {
    this.getNamesFromDB();
  }

  getNamesFromDB = () => {
    // Here you can call DB to get names list.
    // So the following const wouldn't be hardcoded as I did
    const nameList = [
      {
        firstName: 'Pinco',
        lastName: 'Pallino',
      },
      {
        firstName: 'Mario',
        lastName: 'Rossi',
      },
    ];

    // set the component state with the list you've received
    // (by default pickers show the first element of the list, so you don't need to specify pickedName,
    // but if you want to select another element you can do it this way)
    this.setState({
      names: nameList,
      // pickedName: nameList[1] // <-- to select the second element by default
    });
  }

  render() {
    const { pickedName } = this.state;
    return (
      <View style={styles.container}>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 200 }}
          mode={'dropdown'}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.firstName} value={name} />
          ))}
        </Picker>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 200 }}
          mode={'dropdown'}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.lastName} value={name} />
          ))}
        </Picker>
      </View>
    );
  }

我还创建了一个 snack 如果你想看一看。希望我已经说得足够清楚了，我在这里是为了每一个澄清或建议。

在 React-Native 中连接选择器

Connecting Pickers in React-Native

javascript

sqlite

picker

react-native