リアクトネイティブ要素の検索バーrefは未定義

Question

ある

searchbar react-native-elements

...私は図書館反応し、ネイティブの要素のドキュメントに従ったが、私は未定義のオブジェクトとして this.searchを取得します

class SearchBarTest extends Component { 

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

} 

どのようにすればいいですか？

編集：

コードの完全なコンテキストを追加する。

アイディアには、ヘッダーとボディーを持つコンポーネントがあります。ヘッダーには、オプションの検索バーまたはタイトルと、小道具検索に応じた2つのボタンがあります。

search propsがtrueの場合、searchBarが表示されます。

親コンポーネント：実際の検索バーのコンポーネントが使用されている

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, 
    } 
}); 

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は反応ナビゲーションのTabBarに含まれているため、アプリの初期読み込み時にthis.search.focus()エラーが表示されていました。検索画面がtabBarの2番目のタブであるため、これが画面がアクティブでないために検索が見つからなかった理由です。私のルートに

1 - まず：Trigger event on tabBar screen display

画面の検索がcomponentDidUpdate()方法

下と呼ばれているだけthis.search.focus()を起動するために私を助け以下のコードを参照してください：この答えは見つかり

ナビゲータ、私はonNavigationStateChangeとscreenProps

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

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

2 - その後、私の親コンポーネントに、私は私のセットアップからcurrentScreenの小道具を渡す以上で反応し、ナビゲーションを

<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() : '' 
}