Как вызвать метод класса «Экран/Компонент» из «реакционной навигации» Заголовок

Question

Мне нужно вызвать метод класса SearchScreen из заголовка React Navigation Header.

Навигатор выглядеть следующим образом:

Search: { 
    screen: SearchScreen, 
    path: 'search/:query', 
    navigationOptions: { 
     title: 'Search', 
     header: { 
     right: (
      <MaterialCommunityIcons 
      name="filter" 
      onPress={() => { 
       console.log(this); 
      }} 
      style={{marginRight: 15, color: 'white'}} 
      size={24} 
      /> 
     ), 
     }, 
    } 
    } 

Answer 1

Я сделал свою работу, выполнив:

// declare static navigationOptions in the Component 
 
static navigationOptions = { 
 
    title: 'Title', 
 
    header: ({ state }) => ({ 
 
    right: (
 
     <MaterialCommunityIcons 
 
     name="filter" 
 
     onPress={state.params.handleFilterPress} 
 
     style={{marginRight: 15, color: 'white'}} 
 
     size={24} 
 
     /> 
 
    ), 
 
    }), 
 
} 
 

 
_handleFilterPress() { 
 
    // do something 
 
} 
 

 

 
componentDidMount() { 
 
    // set handler method with setParams 
 
    this.props.navigation.setParams({ 
 
    handleFilterPress: this._handleFilterPress.bind(this) 
 
    }); 
 
}

Answer 2

я наткнулся на тот же вопрос и в состоянии разрешить выпуск ниже ссылок.

class MyScreen extends React.Component { 
    static navigationOptions = { 
     header: { 
      right: <Button title={"Save"} onPress={() => this.saveDetails()} /> 
     } 
    }; 

    saveDetails() { 
     alert('Save Details'); 
    } 

    render() { 
     return (
      <View /> 
     ); 
    } 
} 

Источник: react-native issues 145

Ниже мой код

import React, { Component } from "react"; 
import { 
    Container, 
    Header, 
    Item, 
    Input, 
    Icon, 
    Button, 
    Text, 
    Left, 
    Body, 
    Right, 
    Content, 
    Spinner, 
    List, 
    ListItem 
} from "native-base"; 
import { View, Image, StyleSheet, Keyboard } from "react-native"; 
import { connect } from "react-redux"; 
import { 
    onClear, 
    onSearchTextChanged, 
    searchForProfiles 
} from "../../actions/searchActions"; 

class SearchBar extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Header searchBar rounded> 
     <Button 
      iconLeft 
      style={{ paddingLeft: 0 }} 
      light 
      onPress={this.props.onBackPress} 
     > 
      <Icon style={{ marginLeft: 0, fontSize: 35 }} name="arrow-back" /> 
     </Button> 
     <Item> 
      <Icon name="ios-search" /> 
      <Input 
      placeholder="Search" 
      onChangeText={this.props.onChangeText} 
      value={this.props.searchText} 
      /> 
      <Button small transparent onPress={this.props.onClear}> 
      <Icon name="ios-close" /> 
      </Button> 
     </Item> 
     <Button transparent onPress={this.props.onSearch}> 
      <Text>Search</Text> 
     </Button> 
     </Header> 
    ); 
    } 
} 

class SearchWorld extends Component { 
    static navigationOptions = ({ navigation }) => ({ 
    left: null, 
    header:() => { 
     const { state } = navigation; 
     return (
     <SearchBar 
      onBackPress={() => navigation.goBack()} 
      onChangeText={text => { 
      state.params.onChangeText(text); 
      }} 
      onSearch={state.params.onSearch} 
      onClear={state.params.onClear} 
      searchText={state.params.searchText} 
     /> 
    ); 
    } 
    }); 

    onChangeText = text => { 
    this.props.navigation.setParams({ 
     ...this.props.navigation.state, 
     searchText: text 
    }); 
    this.props.onSearchTextChanged(text); 
    }; 

    onSearch =() => { 
    Keyboard.dismiss(); 
    const profile = { search: "test" }; 
    const token = this.props.token; 
    this.props.searchForProfiles(token, profile); 
    }; 

    onClear =() => { 
    this.props.onClear(); 
    this.props.navigation.setParams({ 
     ...this.props.navigation.state, 
     searchText: "" 
    }); 
    }; 

    componentDidMount() { 
    this.props.navigation.setParams({ 
     onChangeText: this.onChangeText, 
     onSearch: this.onSearch, 
     onClear: this.onClear, 
     searchText: this.props.searchText 
    }); 
    } 

    render() { 
    const { searchResults } = this.props; 
    let items = []; 
    if(searchResults && searchResults.data && searchResults.data.length > 0) { 
     items = [...searchResults.data]; 
    } 
    return this.props.loading ? (
     <Container style={{ alignItems: "center", justifyContent: "center" }}> 
     <Spinner color="#FE6320" /> 
     </Container> 
    ) : (
     <Container> 
     <Content> 
      <List 
      style={{}} 
      dataArray={items} 
      renderRow={item => (
       <ListItem style={{ marginLeft: 0}}> 
       <Text style={{paddingLeft: 10}}>{item.password}</Text> 
       </ListItem> 
      )} 
      /> 
     </Content> 
     </Container> 
    ); 
    } 
} 

const mapStateToProps = state => { 
    const { token } = state.user; 
    const { searchText, searchResults, error, loading } = state.searchReaducer; 

    return { 
    token, 
    searchText, 
    searchResults, 
    error, 
    loading 
    }; 
}; 

export default connect(mapStateToProps, { 
    onClear, 
    onSearchTextChanged, 
    searchForProfiles 
})(SearchWorld);