Question

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

在键盘上输入每个字符后，React Native TextInput 失去焦点

0 个答案: