在 TextInput 中创建一个下拉列表以选择（先生、夫人、小姐）。造型是主要问题。 （反应原生纸）

Question

我正在使用

react-native-paper

，这是一个很棒的库，但是当我需要一个

dropdown menu

时，我遇到了一个问题，它覆盖在它周围的

TextInput 

字段上。

Don't want to use any Library

除非保养得当。

  return (
    <View style={{ top: StatusBar.currentHeight }}>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-around',
          marginVertical: 10,
        }}>
        <TextInput
          label={'Title'}
          placeholder={'Mr'}
          value={userinput}
          style={{ width: '30%' }}
          onChangeText={(text) => setUserinput(text)}
          right={<TextInput.Icon icon="chevron-down" size={20} />}
        />
        <TextInput label={'First name'} style={{ width: '60%' }} />
      </View>
      <View style={{ alignSelf: 'center', width: '95%' }}>
        <TextInput
          label={'Phone number'}
          onChangeText={(text) => setUserinput(text)}
        />
      </View>
    </View>
  );

目前 必填：

最低限度世博小吃代码。

已经尝试过

1. 虽然

   react-native-paper

   提供了

   List 

   &

   List.Accordion

   但我的问题并没有解决。 问题 当列表打开时，其他文本机器人字段也会延伸到那里的高度。

2. 映射函数，Flatlist， 问题没有得到我想要的结果。

3. Position: Absolute

   问题 映射无法相应工作。

Answer 1

我使用

flatlist

和

zIndex

属性来做到这一点，请检查我的示例代码

示例：

import React, { useState, useCallback } from 'react';
import { View, StatusBar, FlatList, TouchableOpacity, Text, Keyboard } from 'react-native';
import { TextInput } from 'react-native-paper';
    
    const App = () => {
      const [userinput, setUserinput] = useState(null);
      const [show, setShow] = useState(false);
      const openPicker = useCallback(
        () => {
          Keyboard.dismiss()
          setShow(true)
        },
        [show]
      );
    
      const hidePicker = useCallback(
        (item) => {
          setShow(false)
          setUserinput(item)
        },
        [show, userinput]
      );
    
      return (
        <View style={{ top: StatusBar.currentHeight }}>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-around',
              marginVertical: 10,
            }}>
            <View style={{ width: '30%' }}>
              <TextInput
                label={'Title'}
                placeholder={show ?'' :'Mr'}
                value={userinput}
                style={{ width: '100%' }}
                onChangeText={(text) => setUserinput(text)}
    
                right={<TextInput.Icon onPress={openPicker} icon="chevron-down" size={20} />}
              />
              {show ?
                <FlatList
                  style={{ backgroundColor: 'rgb(211, 211, 211)',elevation:1, zIndex: 22, width: '100%', marginTop: 60, position: 'absolute' }}
                  data={['Mr', 'Mrs', 'Miss']}
                  renderItem={({ item, index }) => (
                    <TouchableOpacity
                      onPress={() => hidePicker(item)}>
                      <Text style={{padding:8}}>
                        {item}
                      </Text>
                    </TouchableOpacity>
                  )}
                  keyExtractor={item => item}
                />
                : null}
            </View>
            <TextInput label={'First name'} style={{ width: '60%' }} />
          </View>
          <View style={{ alignSelf: 'center', width: '95%', zIndex: -1 }}>
            <TextInput
              label={'Phone number'}
              onChangeText={(text) => setUserinput(text)}
            />
          </View>
        </View>
      );
    };
    
    export default App;

注意：

marginTop

将与输入相同

height