Reagieren (native) Navigation toggle Suchleiste

Question

Haben sich ein paar Tage gekämpft, um herauszufinden, wie man einen Suchbalken in der Reaktivnavigation umschaltet.

Mein Ansatz war zu

static navigationOptions = ({navigation}) => { 
    return { 
    title: 'Header Title', 
    headerLeft: (
     {navigation.params.state.search ? <searchfield query={text => navigation.setParams(text)} > : <settings>} 
    ), 
    headerRight: (
     <TouchableOpacity style={{ marginHorizontal: 10 }}> 
     <Icon name="search" size={28} color="#5751D9" /> 
     </TouchableOpacity> 
    ) 
    }} 

Ich wollte dann auf die headerLeft gewisse Logik hinzufügen, damit es entweder gibt die Zahnrad-Symbol Button-Komponente oder eine Textinput-Komponente (Plan, den Text zu übergeben zu setParams und benutze es als ein Filter in der List-Komponente unter der Kopfzeile), aber ich kann nicht herausfinden, wie man einen Zustand oder Zustandshandler als Requisiten übergibt, wenn ich nicht zu ihm navigiere. Es ist der Anfangsbildschirm .

Answer 1

Hängen Sie eine Funktion an Ihre setParams innerhalb von componentDidMount, die aufgerufen werden, um die gesuchteText ändern, verwenden Sie diese Funktion zu setState.

componentDidMount() { 
    this.props.navigation.setParams({onSearchText: (searchedText) => this.onSearchText(searchedText)}); 
} 
onSearchText(searchedText) { 
    //update your list using this searchedText 
    this.setState({searchedText}) 
} 

nun die Funktion onSearchText() aufrufen, wenn searchedText ändert,

static navigationOptions = ({navigation}) => { 
    return { 
    title: 'Header Title', 
    headerLeft: (
     {navigation.params.state.search ? <searchfield query={text => onSearchText(text)} > : <settings>} 
    ), 
    headerRight: (
     <TouchableOpacity style={{ marginHorizontal: 10 }}> 
     <Icon name="search" size={28} color="#5751D9" /> 
     </TouchableOpacity> 
    ) 
    }} 

Hoffe, es wird Ihnen helfen, ...