Question

我正试图在React-Native中使用Data Picker进行下拉

Facebook示例显示了这样的内容

<Picker
  selectedValue={this.state.language}
  style={{ height: 50, width: 100 }}
  onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

所以我复制了相同的内容粘贴到我的应用程序中，但这不起作用。这就是它应该出现在我的应用中的位置[请参见下图]

这就是我在应用程序中使用它的方式

   <View style={searchDrop}> 
             <TextInput
              style={textInput}
              placeholder="Search Coin"
              onChangeText={(text) => this.onSearch(text)} />
              <Picker
                 selectedValue={this.state.language}
                 style={{ height: 50, width: 100 }}
                 onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
                 <Picker.Item label="Java" value="java" />
                 <Picker.Item label="JavaScript" value="js" />
             </Picker>
            </View>

searchDrop样式如下所示

searchDrop: {
    flex: 0.1,
    display: "flex",
    flexDirection: "row",
    height: 40
  },

[问题：] 我可能做错了什么？ （请参阅下面的更新说明）

[更新：] 看起来好像出现了，但隐藏在其他元素的后面。

此外，我希望它们在用户单击时显示。

<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />

类似于Apple网站中的示例 https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/

这是当前在我的应用中显示的样子

Answer 1

根据我为解决该问题而进行的大量实验后的了解，您具有以下结构：

<ScrollView>
    <View flex=0.1 and flexDirection=row}}>
        <TextInput/>
        <Picker/>
    </View>
    <View flex=0.9/>
</ScrollView>

因此正确的设置方法如下：

<ScrollView>
    <View
      style={{
        flex: 0.1,
        flexDirection: "row",
      }}
    >
      <TextInput style={{ flex: 1 }} placeholder="Search Coin" />
      <Picker
        style={{ flex: 1 }}
        selectedValue={"java"}
        onValueChange={value => console.log(value)}
      >
        <Picker.Item label={"Java"} value="java" />
        <Picker.Item label={"JavaScript"} value="js" />
      </Picker>
    </View>
    <View style={{ flex: 0.9}} />
</ScrollView>

或者，如果您想玩高空游戏，请尝试以下示例：

  <ScrollView>
    <View
      style={{
        height: 40,
        flexDirection: "row"
      }}
    >
      <TextInput style={{ flex: 1 }} placeholder="Search Coin" />
      <Picker
        style={{ flex: 1 }}
        selectedValue={"java"}
        onValueChange={value => console.log(value)}
      >
        <Picker.Item label={"Java"} value="java" />
        <Picker.Item label={"JavaScript"} value="js" />
      </Picker>
    </View>
    <View style={{ height: 1900, borderWidth: 1 }} />
  </ScrollView>

在React-native中使用Picker的正确方法

1 个答案: