创建一个下拉列表以在 TextInput 中进行选择-解网

问：

我使用这是一个很棒的库，但是当我需要一个，它覆盖在它周围的字段上时，我遇到了一个问题。除非它维护得当。react-native-paperdropdown menuTextInput 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>
  );

目前需要：

最低限度的世博会小吃代码。

已经尝试过了

虽然提供了&，但我的问题并没有解决。问题当列表打开时，其他文本机器人字段也会延伸到那里的高度。react-native-paperList List.Accordion
映射函数，Flatlist，问题没有得到我想要的结果。
Position: Absolute 问题映射无法正常工作。

react-native 下拉列表 css-position react-native-stylesheet

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;

注意：将与输入相同，您也可以将简单列表移动到组件marginTopheight

创建一个下拉列表以在 TextInput 中进行选择

Make a dropdown list to select in TextInput

评论

评论