reactjs - TextInput 丢失,但每次按键后键盘都保留?
问题描述
试图找出我所拥有的 TextInput 组件的问题,该组件表现得很奇怪。基本上,每次击键后,文本输入似乎都失去了焦点,但键盘似乎保持不变..
我将它实现为当用户触摸搜索图标时触发/动画的搜索栏:
<TouchableHighlight
activeOpacity={1}
underlayColor={"#ccd0d5"}
onPress={onFocus}
style={styles.search_icon_box}
>
onFocus 方法:
const onFocus = () => {
setIsFocused(true);
const input_box_translate_x_config = {
duration: 200,
toValue: 0,
easing: EasingNode.inOut(EasingNode.ease)
}
const back_button_opacity_config = {
duration: 200,
toValue: 1,
easing: EasingNode.inOut(EasingNode.ease)
}
// RUN ANIMATION
timing(input_box_translate_x, input_box_translate_x_config).start();
timing(back_button_opacity, back_button_opacity_config).start();
ref_input.current.focus();
}
只是一个简单的动画,触发时搜索栏将从屏幕右侧滑动
<Animated.View
style={[ styles.input_box, {transform: [{translateX: input_box_translate_x}] } ]}
>
<Animated.View style={{opacity: back_button_opacity}}>
<TouchableHighlight
activeOpacity={1}
underlayColor={"#ccd0d5"}
onPress={onBlur}
style={styles.back_icon_box}
>
<MaterialIcons name="arrow-back-ios" size={30} color="white" />
</TouchableHighlight>
</Animated.View>
<SearchBar
placeholder='Search'
keyboardType='decimal-pad'
returnKeyType='done'
ref={ref_input}
value={searchText}
onChangeText={search}
onClear={onBlur}
onSubmitEditing={onBlur}
onFocus={() =>console.log("focus received" ) }
onBlur={() => console.log("focus lost") }
/>
</Animated.View>
搜索
const search = (searchText) => {
setSearchText(searchText);
let filteredData = AnimalList.filter(function (item) {
return item.tag_number.toString().includes(searchText);
});
setFilteredData(filteredData);
}
因此,当我单击搜索图标时,搜索栏将通过动画视图呈现自己,并且键盘将自动聚焦。但是,在键盘上输入单个字符后,搜索栏就会消失,而键盘仍然显示。
我尝试使用调试onFocus={() =>console.log("focus received" ) }
,看起来 searchBar 仍然专注于,它只是没有显示
编辑:在此处发布视频https://github.com/renwid/test/issues/1
解决方案
您可以显示完整版SearchBar
以获得更多帮助
[更新]
第一步,Animated.Value
必须是
const input_box_translate_x = useRef(new Value(width)).current;
const back_button_opacity = useRef(new Value(0)).current;
代替
const input_box_translate_x = new Value(width);
const back_button_opacity = new Value(0);
因为你使用function component
andre-render
可能是re-create
the component
and the Animated.Value
will be re-create
too。所以Animated.Value
不能保持状态并导致你发出
推荐阅读
- mysql - 有没有更好的方法来编写我写的查询
- c - 如果用户给出“y”作为输入,C 程序需要继续循环
- arrays - 如何通过其他一维数组访问一维数组的元素?
- angular - mat-side-nav 栏不会延伸到窗口的整个宽度
- typescript - 在 VS 代码中重新索引打字稿文件不会自动运行
- javascript - jQuery - 将函数挂钩到 html 属性
- javascript - 提交 html 表单并通过电子邮件发送(PHP、AJAX、HTML)
- angular - ng serve --open 错误您可能需要适当的加载程序来处理此文件类型
- docker - Docker - 我无法在浏览器上显示我的容器
- python - 替换全局变量