如何在 React Native 中为 TextInput 添加信息弹窗？

Question

我想在 React Native 中实现这样的功能：

我有一个 TextInput 组件，我想在右侧放置一个图标。用户可以点击它，然后我可以在模式或另一个组件中显示一些文本。

这在 React Native 中可行吗？

return(
<View style={styles.container}>

        <TextInput
        placeholder="Állat neve"
        value={AllatNev}
        style={styles.textBox}
        onChangeText={(text) => setAllatNev(text)}
        />

</View>
 );
 }
 )



  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: color_theme_light.bodyBackground
      justifyContent: 'center',
      alignItems:'center'
    },
    textBox:{
      borderWidth:2,
      borderColor: color_theme_light.textBoxBorder,
      margin:15,
      borderRadius:10,
      padding: 10,
      fontFamily:'Quicksand-Medium'
       },
    });

Answer 1

是的——您可以使用绝对定位和 zIndex 将您的信息按钮定位在 TextInput 上，例如：

import * as React from 'react';
import { Text, View, StyleSheet, TextInput, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textBoxParent}>
        <TextInput style={styles.textBox} placeholder="Állat neve"/>
        <TouchableOpacity style={styles.textBoxButton} onPress={() => {
          //launch your modal
        }}>
          <Text>i</Text>
        </TouchableOpacity>
      </View>
    </View>
  );  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  textBoxParent: {
    justifyContent: 'center'
  },
  textBox:{
      borderWidth:2,
      borderColor: 'gray',
      margin:15,
      borderRadius:10,
      padding: 10,
  },
  textBoxButton: {
    position: 'absolute',
    right: 20,
    zIndex: 100,
    width: 20,
    height: 20,
    borderWidth: 1,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

工作示例：https://snack.expo.dev/OFMTc8GHE

Answer 2

这是您想要的完整示例 (https://snack.expo.dev/bjzBFuE4W)。下面我解释一下代码。

首先我从 react native 中创建了一个 Modal，它接受 modalVisible、setModalVisible，并在 modalVisible 为真时出现。

import * as React from 'react';
import { Text, View, StyleSheet,TextInput ,TouchableOpacity,Modal} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons'; 

const ModalInfo = ({modalVisible, setModalVisible})=>{
  return (
     <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View style={{
           flex: 1,
          justifyContent: "center",
          alignItems: "center",
          
        }}>
          <View
          style={{
            width:200,height:200,backgroundColor:"gray",borderWidth:2,
            justifyContent:"center",alignItems:"center"

          }}
          >

             <TouchableOpacity onPress={()=>{setModalVisible(false)}}>
             
                <MaterialIcons name="cancel" size={24} color="black" />
             </TouchableOpacity>

          </View>
        </View>
      </Modal>
  )
}

接下来，我制作了一个视图来环绕 textInput，这样我还可以添加信息图标的 svg。然后将外部视图设置为具有 flexDirection:"row"，这样一切都会按照您想要的方式排序。

const TextInputWithModal = ()=>{
  const [modalVisible, setModalVisible] = React.useState(false);
  const [AllatNev,setAllatNev]= React.useState("");
  return (
    <View style={styles.textInputContainer}>
       <TextInput
        placeholder="Állat neve"
        value={AllatNev}
        style={styles.textBox}
        onChangeText={(text) => setAllatNev(text)}
        />
        
        <TouchableOpacity onPress={()=>{setModalVisible(true)}}>
          <AntDesign name="infocirlceo" size={24} color="black" />
        </TouchableOpacity>
      <ModalInfo modalVisible={modalVisible} setModalVisible={setModalVisible}/>
    </View>
  )
}

export default function App() {
  return (
    <View style={styles.container}>
        <TextInputWithModal/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:"center",
  },
  textInputContainer:{
      borderRadius:10,
      padding: 10,
      flexDirection:"row",
      margin:15,

      borderWidth:2,
  },
  textBox:{
    fontFamily:'Quicksand-Medium',
    marginRight:20,
  },
 
});

如何在 React Native 中为 TextInput 添加信息弹窗？

How to add information pop-up for TextInput in React Native?

javascript

icons

information-retrieval

reactjs

react-native