Question

我遵循react-native-elements库的文档，但我将this.search作为未定义的对象...

class SearchBarTest extends Component {

    componentDidMount()
    {
        this.search.focus()//search is undefined
    }
    render(){
        <SearchBar
          ref={search => this.search = search}
          ...
        />
    }

}

知道如何使其正常工作吗？

编辑：

添加完整的代码上下文。

这个想法是拥有一个带有标题和正文的组件。标题有一个可选的搜索栏或标题和两个按钮，具体取决于道具搜索。

如果搜索道具为true，则显示searchBar。

PARENT COMPONENT：

import React, {Component} from 'react';
import {StyleSheet, View, Text, TouchableWithoutFeedback, Keyboard} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

import DismissableKeyboardContainer from '../../components/DismissableKeyboardContainer';

export default class Search extends Component {

    static navigationOptions = () => {
        return {
            tabBarIcon: ({tintColor}) => (
                <Icon name="ios-search-outline" size={25} color={tintColor}/>
            )
        }
    };

    render() {


        someMethod = () => {
            console.log('hello');
        }

        return (
            <DismissableKeyboardContainer search={true}>
                <View style={{flex: 1, alignItems: 'center'}}>
                    <Text>Hello world</Text>
                </View>

            </DismissableKeyboardContainer>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

使用实际searchBar组件的COMPONENT：

import React, { Component} from 'react';
import { Keyboard, TouchableWithoutFeedback, TouchableOpacity, View, Text, StyleSheet} from 'react-native';

import { SearchBar } from 'react-native-elements'

import Icon from 'react-native-vector-icons/Ionicons';

import PropTypes from 'prop-types';

class DismissableKeyboardContainer extends Component {

    static defaultProps = {
        title: '',
        search: false,
        buttonLeft: '',
        buttonRight: '',
        borderShadow: true,
        headerStyle:{}
    };

    componentDidMount()
    {

    }
    render() {

        let { title, search, buttonLeft, buttonRight, headerStyle, borderShadow } = this.props;

        return (        

            <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
                <View style={{ flex: 1 }}>
                    <View style={[styles.headerContainer, borderShadow ? styles.borderShadow : '', headerStyle]}>
                        {
                            !search && <View style={{position: 'absolute', padding: 10, bottom: 0, flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>

                                <TouchableOpacity style={{ flex: 0.2, alignItems: 'center'}}>

                                    {
                                        buttonLeft != "" && <Icon name={buttonLeft} size={25} color="grey" />
                                    }

                                </TouchableOpacity>

                                <View style={{ flex: 1, alignItems: 'center' }}>
                                    <Text style={styles.title}>{title}</Text>
                                </View>
                                <TouchableOpacity style={{ flex: 0.2, alignItems: 'center' }}>
                                    {
                                        buttonRight != "" && <Icon name={buttonRight} size={25} color="grey" />
                                    }
                                </TouchableOpacity>
                            </View>
                        }
                        {
                            search && <SearchBar
                                ref={search => this.search = search}
                                containerStyle={{ backgroundColor: 'transparent', borderTopWidth: 0, borderBottomWidth: 0 }}
                                inputStyle={{ backgroundColor: 'white' }}
                                lightTheme
                                onChangeText={someMethod}
                                placeholder='Type Here...'
                            />
                        }

                    </View>
                    <View style={{ flex: 1, backgroundColor: 'transparent'}}>

                        {this.props.children}

                    </View>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

const styles = StyleSheet.create({

    headerContainer: {
        flex: 0.12,
        justifyContent: 'flex-end',
        backgroundColor: 'white' ,
    },
    borderShadow: {
        borderColor: '#ddd',
        borderBottomWidth: 0,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        shadowRadius: 1,
        elevation: 1,
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold'
    }
});

DismissableKeyboardContainer.propTypes = {
    title: PropTypes.string.isRequired,
    search: PropTypes.bool.isRequired,
    buttonLeft: PropTypes.string.isRequired,
    buttonRight: PropTypes.string.isRequired,
    headerStyle: PropTypes.any,
};

export default DismissableKeyboardContainer;

Answer 1

我想我发现了这个问题。由于我的SearchScreen是来自react-navigation的TabBar的一部分，因此在应用程序的初始加载时出现this.search.focus()错误。 “搜索”屏幕是tabBar的第二个选项卡，我想这就是为什么在屏幕未激活时无法找到搜索的原因。

找到了这个答案：Trigger event on tabBar screen display

只有在this.search.focus()方法下调用屏幕搜索

时，才帮我启动componentDidUpdate()

请参阅以下代码：

1-首先在我的根导航器上，我使用onNavigationStateChange和screenProps跟踪反应导航屏幕更改

<Root 
    onNavigationStateChange={(prevState, currentState, action) => {
        let currentScreen = action.routeName;

        this.setState({ currentScreen })
    }}
    screenProps={{ currentScreen: this.state.currentScreen }}
/>

2-然后在我的Parent组件上，我在react-navigation

中从上面的I setup中传递currentScreen prop

<DismissableKeyboardContainer search={true} currentScreen={this.props.screenProps.currentScreen}>
    <View style={{flex: 1, alignItems: 'center'}}>
        <Text>Hello world</Text>
    </View>

</DismissableKeyboardContainer>

3-现在，我正在检查正在显示的屏幕，并且仅当我的this.search.focus()子组件中显示屏幕搜索时才启动DismissableKeyboardContainer。

componentDidUpdate() {
    this.props.currentScreen === "Search" ? this.search.focus() : ''
}

React-native元素搜索栏引用使用focus（）方法，例如未定义

1 个答案: