React Native Picker 如何设置占位符？

Question

有没有一种方法可以在用户点击之前显示react native picker的占位符。想法是拥有一个选择器，上面写着“国籍”，一旦您点击并选择了您的国家，它就会呈现所选国家。我希望在选择器中不必将“国籍”作为可用选项。

- Tiagojdferreira

---

我遇到了同样的问题。作为解决方案，我使用了一个第三方库https://github.com/n4kz/react-native-material-dropdown。它非常稳定可靠。 - vogdb

Answer 1

将第一个子项放置为 <Picker.Item value='' label='占位文本...' />

。

- sospedra

---

如果我没记错，这种方法的问题是选项会显示在列表中。最终，我将占位符放在一个组件中，如果没有选择任何值，则呈现该占位符。 - Tiagojdferreira

这是正确的@Tiagojdferreira，尽管它模仿了Web标准实现：http://codepen.io/sospedra/pen/ZLwrew。正如您所提到的，要完全删除它，请呈现不同的组件。 - sospedra

@Tiagojdferreira，您能否提供一个新答案并接受它作为解决方案？这样其他人也可以使用它。 - Anima-t3d

在CodePen中，列表中有一个名为“disabled”的选项...就我所知，没有办法禁用选择器列表中的项目。 - Petrov

@Tiagojdferreira，您能否详细介绍一下您的解决方案是如何工作的？如果没有值并且只显示占位符，那么当单击它时，您如何能够显示选择器？ - Petrov

Answer 2

我不确定这是正确的方法。

<Picker selectedValue={locals.value}
onValueChange={value => {
    if (value != "0")
        this.pickerValueChange(value)

    // so it won't care if header is selected...
}}>
    <Picker.Item label="Select Type" value="0" />
    <Picker.Item label="Diesel" value="Diesel" />
    <Picker.Item label="Gas" value="Gas" />
    <Picker.Item label="Electricity" value="Electricity" /> 
</Picker>

pickerValueChange 函数:

pickerValueChange = val => {
    // state change or whatever you want to perform on picker update
}

- Amal K.R

---

这是一个不错的建议，但你可以使用更简单的值来比较标题项。我正在编辑你的答案！ - TalESid

Answer 3

您可以使用 NativeBase 的选择器。

1. 运行：

npm i native-base --save

2. 将其导入为：

import {Picker} from 'native-base';

3. 用途：

<Picker
placeholder="Start Year" // yipeee, placeholder
iosIcon={<Ionicons name="ios-arrow-down" />} // right icon
selectedValue={this.state.selected_id} // your selected item value
style={{
    // your styles
}}
// onValueChange={this.onValueChange.bind(this)} // use it the way it suites you
onValueChange={(v)=>this.setState({selected_id:v})} // use it the way it suites you
>


 <Picker.Item label="Val 1" value="1" />
   <Picker.Item label="Val 2" value="2" />
   <Picker.Item label="Val 3" value="3" />

</Picker>

- Faisal Shahzad

Answer 4

我也一直在寻找这个答案，最终自己解决了。以下是我的解决方案，希望能帮到其他人。

1. 创建一个检查空值的函数。

  const isPlaceholder = (value) => {
    return value == "";
  }

2. 我们将第一个选项设置为占位符，但如果值为空（我们将占位符的值设置为空字符串），则更改样式以使其看起来像占位符。

如果所选选项的值为空，则使用样式styles.placeholder。否则，我们只是使用普通样式(styles.picker)。

            <Picker
              selectedValue={gender}
              style={
                isPlaceholder(gender) ? (styles.placeholder) : (
                  styles.picker
                )}

              onValueChange={(itemValue, itemIndex) => setGender(itemValue)}
              <Picker.Item color="grey" label="Choose Gender..." value="" /> 

// the first option is grey in the 
// picker to make it more like a title 

              <Picker.Item label="Male" value="male" />
              <Picker.Item label="Female" value="female" />
            </Picker>

占位符和值的样式

const styles = StyleSheet.create({
  placeholder: {
    height: 50, width: '100%',
    color: "grey",  // PLACE HOLDER COLOR
  },
 picker: {
    height: 50, width: '100%',
    color: "blue",  // VALUE COLOR
  },
)}

- Tim Kim

Answer 5

使用同一组件中的状态，您可以在用户选择元素后过滤元素。

例如：

...
const [selectedValue, setValue] = useState(0)
const values = ['Your placeholder', 'Option A', 'Option B', 'Option C']
....
        <Picker
          mode="dropdown"
          selectedValue={selectedValue}
          onValueChange={(itemValue) => setValue(itemValue)}
        >
          {values
            .filter((value, index) => selectedValue === 0 ? value : index === 0 ? false : value)
            .map((value, index) => (
              <Picker.Item label={value} value={value} key={index} />
            ))}
        </Picker>

- Ale Paciotti