![](/img/trans.png)
[英]TextInput is not responding when I use TouchableWithoutFeedback in React Native
[英]How can I focus on textinput when i click on TouchableWithoutFeedback?
我有一個文本輸入。 在這個文本輸入中,我有一個字母“O”作為圖標。 當我按下“O”字母時,我希望 textinput 可以點擊,我該怎么做?
現在它不起作用,因為我無法將此屬性添加到該字母中。 我添加了我的文本輸入在應用程序中的外觀。 先感謝您。
這是 App.js
import React, { useState } from 'react';
import { TouchableWithoutFeedback, StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView, TouchableHighlight } from 'react-native';
import Application from "../icons/application.svg"
import HorizontalCircles from '../HorizontalCircles';
import HorizontalDiscussion from "../HorizontalDiscussion";
import Energy from "../icons/energy.svg"
import Add from "../icons/add.svg"
import Calendar from "../icons/calendar.svg"
import Clock from "../icons/clock.svg"
const MainScreen = ({ navigation }) => {
const [text, setText] = useState("");
return (
// for ios, i add safeareview and flex:1, otherwise height doesnt become 100%
<SafeAreaView style={{flex:1,}} >
<View style={styles.container}>
<View style={styles.appIcon}>
<Application height={30} width={22} fill={"#1E2439"} />
<View style={{ height: 30, width: 30, backgroundColor: "#DBF1F9", borderRadius: 20 }} />
</View>
<View style={[styles.input,{ flexDirection: "row", alignItems: "center" }]}>
<TouchableWithoutFeedback onPress={onfocus(TextInput)}>
<Text style={{ marginLeft: 5 }}>O</Text>
</TouchableWithoutFeedback>
<TextInput style={{ flex: 1 }} placeholder="Search" placeholderTextColor="#B9B9C5" onChangeText={setText} value={text}></TextInput>
</View>
<Text>{text}</Text>
<View style={{ height: 120 }}>
<ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ marginVertical: 20, alignItems: "center" }} horizontal={true}>
<View style={{ height: 40, width: 40, backgroundColor: "#FFFFFF", borderRadius: 20, marginRight: 10, borderStyle: "dotted", borderWidth: 5, borderColor: "#E2E2E2" }} />
<HorizontalCircles colorFirst={"#CFC8FF"} colorSecond={"#4CC98F"} />
<HorizontalCircles colorFirst={"#FFA2BF"} colorSecond={"#FFD24D"} />
<HorizontalCircles colorFirst={"#FEE3AA"} colorSecond={"#4DC98F"} />
<HorizontalCircles colorFirst={"#FEDFCC"} colorSecond={"#B3C2D8"} />
<HorizontalCircles colorFirst={"#FFA2BF"} colorSecond={"#FF3FFF"} />
<HorizontalCircles colorFirst={"#F3A5FF"} colorSecond={"#1CB28F"} />
<HorizontalCircles colorFirst={"#EFBCFF"} colorSecond={"#22398F"} />
<HorizontalCircles colorFirst={"#AFBFCF"} colorSecond={"#44798F"} />
<HorizontalCircles colorFirst={"#AEDF5F"} colorSecond={"#98C98F"} />
<HorizontalCircles colorFirst={"#DDB825"} colorSecond={"#359424"} />
</ScrollView>
</View>
{/* Discussion Part */}
<Text style={styles.blackText}>Group Discussion On Going</Text>
<View style={{ height: 250 }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{ flexDirection: "row", alignItems: "center", }}>
<HorizontalDiscussion color={"#FFF9F2"} />
<HorizontalDiscussion color={"#E7FBFF"} />
</ScrollView>
</View>
<Text style={styles.blackText}>Todays Task</Text>
{/* Task Part */}
<ScrollView style={{ height: 300 }}>
<View style={{ padding: 30 }}>
<View style={styles.task}>
<View style={{ backgroundColor: "#FFEFE2", padding: 10, borderRadius: 13 }}>
<Energy height={35} width={25} fill={"#FB9238"} />
</View>
<View style={{ marginLeft: 15, flex: 1 }}>
<Text style={styles.blackText}>8 Tasks Today</Text>
<Text style={styles.grayText}>Meet them & Share your experience</Text>
</View>
<View style={{ marginLeft: 5 }}>
<Add height={35} width={25} fill={"#ABA8BA"} />
</View>
</View>
<View style={styles.task}>
<View style={{ backgroundColor: "#FEF8E6", padding: 10, borderRadius: 13 }}>
<Calendar height={35} width={25} fill={"#FCC626"} />
</View>
<View style={{ marginLeft: 15, flex: 1 }}>
<Text style={styles.blackText}>Event</Text>
<Text style={styles.grayText}>Create & Share Event</Text>
</View>
<TouchableHighlight onPress={() => navigation.navigate("NewScreen")}>
<View>
<Add height={35} width={25} fill={"#ABA8BA"} />
</View>
</TouchableHighlight>
</View>
<Text style={styles.blackText}>Proposed classes</Text>
<View>
<Text style={{ color: "#9993D3", fontSize: 18 }}>Math class</Text>
<View style={styles.proposed}>
<Text style={{ color: "#706E80", fontSize: 20 }}>Rasyid Hilman</Text>
<View style={{ height: 35, width: 35, backgroundColor: "#FEE3AA", borderRadius: 25, marginHorizontal: 10, }} />
</View>
<View style={styles.proposed}>
<View style={styles.agendaClockSvg}>
<Calendar height={40} width={30} fill={"#D4D3DA"} />
<Text style={{ color: "#B0AFB7", fontSize: 18, marginLeft: 10 }}>August 16, 2021</Text>
</View>
<View style={styles.agendaClockSvg}>
<Clock height={40} width={30} fill={"#C0BFC6"} />
<Text style={{ color: "#AFAEB8", fontSize: 18, marginLeft: 10 }}>15:00</Text>
</View>
</View>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: "#FFFFFF",
},
appIcon: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
input: {
height: 40,
borderWidth: .5,
borderRadius: 10,
marginVertical: 10,
backgroundColor: "#F7F6F9",
marginVertical: 20,
},
blackText: {
fontSize: 20,
fontWeight: "bold",
},
grayText: {
color: "#A29E97",
fontSize: 17,
},
task: {
flexDirection: "row",
alignItems: "center",
marginBottom: 15,
justifyContent: "space-between"
},
proposed: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
},
agendaClockSvg: {
flexDirection: "row",
alignItems: "center",
}
});
export default MainScreen;
您可以使用 react 中的useRef
掛鈎來聚焦任何元素。 您只需要創建一個新的 Ref,然后將其分配給<TextInput />
和 onPress 任何元素,您就可以使用inputRef.current.focus()
聚焦該輸入 ref
const MainScreen = ({ navigation }) => {
const inputRef = useRef();
const [text, setText] = useState("");
...
...
<TouchableWithoutFeedback onPress={() => {inputRef.current.focus()}}>
<Text style={{ marginRight: 25 }}>O</Text>
</TouchableWithoutFeedback>
<TextInput style={{ flex: 1 }} placeholder="Search" placeholderTextColor="#B9B9C5" onChangeText={setText} value={text} ref={inputRef}></TextInput>
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.