Saya memiliki input teks. Ketika saya mengklik input teks, saya ingin "Ikon Pencarian" menjadi pasif, tetapi ketika saya tidak mengklik input teks, saya ingin "Ikon Pencarian" menjadi aktif,

Anehnya tidak melakukan apa yang saya inginkan. Ketika saya melihat kode saya, itu terlihat benar, tetapi saya pasti memiliki sesuatu yang salah karena tidak berfungsi seperti yang saya inginkan. (tidak memberikan kesalahan)

Aplikasi.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, isTextInputFocused } from 'react-native';
import Search from "./src/icons/search.svg";
import {Loupe} from "./src/icons/loupe.png";
const App = () => {
 

  return (
    <View style={styles.container}>
      <View style={styles.firstPart}>
        <Text style={styles.date}>Saturday, Feb 21</Text>
        <View style={styles.package}>
          <Text style={styles.packageText}>Your Package</Text>
          <View style={styles.plusIcon}>
            <Text style={styles.textPlus}>+</Text>
          </View>
        </View>
        {isTextInputFocused ? (<Search height={25} width={20} fill={"#00FF00"} style={{ position: "absolute", top: 90, left: 30, zIndex: 0 }} />):
          (<Search height={25} width={20} fill={"#A9A9A9"} style={{ position: "absolute", top: 90, left: 25, zIndex: 20 }}/>)}
        
        <TextInput style={styles.input} placeholder="Search" placeholderTextColor="gray"></TextInput>
      </View>

   {/*    { !isTextInputFocused && (<View>
        <Search height={30} width={30} fill={"#00FF00"} />
      </View>)} */}
  


    </View>
  );
};

const styles = StyleSheet.create({
  container:{
    margin:10,

  },
  firstPart:{
    backgroundColor: "mediumblue",
    borderTopRightRadius:40,
    borderTopLeftRadius:40,
    padding:20,
  },
  date:{
    fontSize:15,
    color:"white",
  },
  package:{
    flexDirection: "row",
    justifyContent: "space-between",
  },
  packageText: {
    fontSize:25,
    color:"white",
    flexDirection: "column",
    
    
  },
  plusIcon: {
    height:25,
    width:25,
    borderRadius:25,
    backgroundColor:"blue",
    marginTop:5,
   
  },
  textPlus: {
    fontSize:25,
    fontWeight:"bold",
    color:"white",
    marginLeft:5,
  },
  input: {
    height:40,
    borderWidth:.5,
    borderRadius:10,
    marginVertical:10,
    backgroundColor:"darkslateblue",
    padding:5,
  }
});

Ekspor Aplikasi default;

0
user15775693 11 Mei 2021, 18:25

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan onFocus komponen TextInput, onBlur props untuk memfokuskan informasi pada input. Contoh kode tersedia di bawah ini.

  const [text, setText] = useState("")
  const [inputFocus, setFocus] = useState(false)

  return (
    <View style={styles.container}>
      <Text>
        {inputFocus ? "Focused" : "Not Focused"}
      </Text>

      <TextInput
        value={text}
        onChangeText={setText}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        style={{
          width: "100%",
          height: 44,
          backgroundColor: "gray"
        }}
      />
    </View>
  )
1
kadiraydinli 11 Mei 2021, 17:57