reactjs - 如何在 react 原生中按下文本输入时隐藏图像

Question

这是我目前的代码..
我对本地 react 完全陌生..请帮忙。

import React from 'react';
import { StyleSheet, Text, View, TextInput,StatusBar, SafeAreaView,Image,Button,Alert} from 'react-native';
export default function App() {
  return (      
    <SafeAreaView>
    <View style={styles.container}>
    <TextInput 
      
      placeholder="Search"
      style={styles.searchbox}                        
    ></TextInput>        
    <View style={styles.makecentral} > 
    <Image                  
        style={styles.tinyLogo}
        source={require('./assets/icons8_search_200px_3.png')}        
      />
    </View>
  </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {    
    backgroundColor: '#fff',    
  },
  searchbox:{
    backgroundColor:'#f2f2f2',
    marginTop : StatusBar.currentHeight+5,
    height : 50,
    marginLeft:10,
    marginRight : 10,
    borderRadius : 20,
    textAlignVertical:'center',
    textAlign : 'center',
    alignItems:'center',        
  },
  tinyLogo: {
    position : 'absolute',
    width: 30,
    height: 30,
    opacity: 0.5,
    marginTop: -40,    
  },
  makecentral: {
    alignItems:'center',
    marginRight:80,    
  }  
});

我想通过按文本输入来隐藏搜索图像。
我在搜索框中有一个图像，我想在用户触摸文本输入时隐藏该图像。

Answer 1

import React, {  useState } from 'react'; //import useState
import { StyleSheet, Text, View, TextInput,StatusBar, SafeAreaView,Image,Button,Alert} from 'react-native';
export default function App() {
    const [search, setSearch] = useState(''); //add this line
  return (      
    <SafeAreaView>
    <View style={styles.container}>
    <TextInput 
      onChangeText={(text) => setSearch(text)}
      placeholder="Search"
      style={styles.searchbox}                        
    ></TextInput>        
    <View style={styles.makecentral} >   
    {search.length < 1 ? <Image               
        style={styles.tinyLogo}
        source={require('./assets/icons8_search_200px_3.png')}        
      /> : ( 
          null  //add clear text image and clear search text
      )}
    
    </View>
  </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {    
    backgroundColor: '#fff',    
  },
  searchbox:{
    backgroundColor:'#f2f2f2',
    marginTop : StatusBar.currentHeight+5,
    height : 50,
    marginLeft:10,
    marginRight : 10,
    borderRadius : 20,
    textAlignVertical:'center',
    textAlign : 'center',
    alignItems:'center',        
  },
  tinyLogo: {
    position : 'absolute',
    width: 30,
    height: 30,
    opacity: 0.5,
    marginTop: -40,    
  },
  makecentral: {
    alignItems:'center',
    marginRight:80,    
  }  
});