TextInput 丢失，但键盘在每次击键后仍然存在？

Question

试图找出我拥有的 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

Answer 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 和 re-render 可能是 re-create，component 和 Animated.Value 也将是 re-create。所以 Animated.Value 无法保持状态并导致你发出

TextInput 丢失，但键盘在每次击键后仍然存在？

TextInput goes Missing, but Keyboard Stays After Every KeyStroke?

reactjs

react-native

react-native-flatlist

react-native-reanimated