将下拉箭头添加到react-native-modal selector

Question

我正在使用模块react-native-modal-selector来替换我的移动应用程序中的下拉菜单。我希望选择器输入框有一个下拉箭头，因为它在我的网页版本。对如何实现这一点有什么建议吗？

<ModalSelector 
   data={playTypeData}
   initValue='Play Type'
   onChange={(option)=>setEventTitle(option.label)}>
   <TextInput 
      style={styles.input}
      editable={false}
      value={eventTitle}
      placeholder={'Play Type'}
   />
</ModalSelector>

const styles = StyleSheet.create({
   input: {
        height: 60, 
        width: 180, 
        borderColor: 'lightgrey', 
        borderWidth: 1,
        borderRadius: 5,
        fontSize: 16,
        fontWeight: '300',
        marginBottom: 20,
        paddingLeft:10
    },
});

它看起来像什么：

[

​

我需要的是：

​

​

Answer 1

import { MaterialIcons } from '@expo/vector-icons';

<ModalSelector
   data={playTypeData}
   initValue='Play Type'
   onChange={(option)=>setEventTitle(option.label)}>
   <TextInput 
      style={styles.input}
      editable={false}
      value={eventTitle}
      placeholder={'Play Type'}
   />
</ModalSelector>
<MaterialIcons name='expand-more' size={24} color='#ccc' style={{ position: 'absolute', right: 5, zIndex: -1, }} />