Question

是否有办法在用户点击之前显示反应原生选择器的占位符。我们的想法是有一个选择器说“国籍”和＃34;一旦你点击并选择你的国家，它就会呈现国家。我想这样做而没有＆＃34;国籍＆＃34;作为选择器中的可用选项。

Answer 1

将第一个孩子放在<Picker.Item value='' label='Placeholder text...' />

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
}

Answer 3

您可以改用本机库的选择器。

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>

Answer 4

在同一组件中使用状态，一旦用户被选择一个元素，就可以过滤这些元素。

例如：

...
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>

Answer 5

我也一直在寻找这个问题，并自己解决了这个问题，如下所示。希望这也能帮助其他人。

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

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

我们将第一个选项设置为占位符，但更改样式以使其在值为空时看起来像占位符（我们将占位符值设置为“”）。

如果选择的选项值为空，那么我们使用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
  },
)}

有一个占位符反应本机选择器

5 个答案: