>

정의되지 않은 것은 _this.props.navigation을 평가하는 객체가 아닙니다. 여기 내 코드가 있습니다.

I want to use the in multiple screens so I have to extract it out and call it in any I need it in.

https://github.com/ react-navigation/react-navigation/issues/2198 # issuecomment-316883535 -운이 없다.

Category.js

import React, {Component} from 'react';
import {View, FlatList} from 'react-native';
import {ListItem} from 'react-native-elements'
import {AppRegistry, TouchableOpacity, ActivityIndicator} from 'react-native';
import {SearchHeader} from '../SearchHeader';
export default class Category extends Component {
  constructor() {
    super();
    this.state = {
      list: [],
    };
    this.onPress = this.onPress.bind(this);
  }
  static navigationOptions = {
    title: 'Categories',
    headerStyle: {backgroundColor: '#ffb30c'},
  };
  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "98%",
          backgroundColor: "#CED0CE",
          marginLeft: "1%",
          marginRight: "1%"
        }}
      />
    );
  };
  _keyExtractor = (item, index) => item.name;
  renderHeader = () => {
    return (<SearchHeader />);
  };
  renderFooter = () => {
    if (!this.state.loading) return null;
    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE"
        }}
      >
        <ActivityIndicator animating size="large"/>
      </View>
    );
  };
  onPress = (item) => {
    this.props.navigation.navigate('SpecTypeScreen',{cat:item});
  };
  search = () => {
  };
  render() {
    return (
      <FlatList
        data={this.state.list}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => this.onPress(item)}>
            <ListItem
              title={`${item.name}`}
              containerStyle={{borderBottomWidth: 0}}
            />
          </TouchableOpacity>
        )}
        keyExtractor={this._keyExtractor}
        ItemSeparatorComponent={this.renderSeparator}
        ListHeaderComponent={this.renderHeader}
        ListFooterComponent={this.renderFooter}
      />
    );
  }
}
AppRegistry.registerComponent('CategoryScreen', () => CategoryScreen);

SearchHeader.js

import React, {Component} from 'react';
import Autocomplete from 'react-native-autocomplete-input';
import {
  AppRegistry,
  View,
  StyleSheet,
  Platform,
  Text,
  TouchableOpacity,
} from 'react-native';
import {withNavigation} from 'react-navigation';
import colors from './config/colors';
import normalize from './config/normalizeText';
export class SearchHeader extends Component {
  constructor() {
    super();
    this.state = {
      list: [],
    };
  }
  search = (term) => {
    if (term.length > 2) {
      fetch("https://myUrl?term=" + encodeURI(term))
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({list: responseJson});
          console.log(responseJson);
        })
        .catch((error) => {
          console.error(error)
        });
    }
    else{
      this.setState({list: []});
    }
  };
  onPress = (item) => {
    this.props.navigation.navigate('ProductScreen',{spec:item});
  };
  render() {
    return (
      <View style={[
        styles.container, styles.containerLight
      ]}>
        <Autocomplete placeholder="Search Specs & Approvals..."
                      autoCorrect={false}
                      onChangeText={this.search}
                      data={this.state.list}
                      containerStyle={{backgroundColor: "#d71201"}}
                      inputStyle={{backgroundColor: "#fff"}}
                      renderItem={({ id, specification }) => (
                        <TouchableOpacity style={styles.autocompleteContainer} onPress={this.onPress.bind(this, specification)}>
                          <Text style={styles.itemText}>
                            {specification}
                          </Text>
                          <View
                            style={{
                              height: 1,
                              width: "98%",
                              backgroundColor: "#CED0CE",
                              marginLeft: "1%",
                              marginRight: "1%"
                            }}
                          />
                        </TouchableOpacity>
                      )}
                      style={[
                        styles.input,
                        styles.inputLight,
                        {borderRadius: Platform.OS === 'ios' ? 15 : 20},
                        {paddingRight: 50}
                      ]}/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderBottomColor: '#000',
    borderTopColor: '#000',
    backgroundColor: "#d71201",
    maxHeight:70
  },
  containerLight: {
    borderTopColor: '#e1e1e1',
    borderBottomColor: '#e1e1e1',
  },
  input: {
    paddingLeft: 26,
    paddingRight: 19,
    margin: 8,
    borderRadius: 3,
    overflow: 'hidden',
    backgroundColor: colors.grey5,
    fontSize: normalize(14),
    color: colors.grey3,
    height: 40,
    ...Platform.select({
      ios: {
        height: 30,
      },
      android: {
        borderWidth: 0,
      },
    }),
  },
  inputLight: {
    backgroundColor: "#fff"
  },
  autocompleteContainer: {
    backgroundColor:"#fff",
    marginLeft: 10,
    marginRight: 10
  },
  itemText: {
    fontSize: 15,
    margin: 5,
    marginLeft: 20,
    paddingTop:5,
    paddingBottom:5
  },
  descriptionContainer: {
    backgroundColor: '#F5FCFF',
    marginTop: 8
  },
  infoText: {
    textAlign: 'center'
  },
  titleText: {
    fontSize: 18,
    fontWeight: '500',
    marginBottom: 10,
    marginTop: 10,
    textAlign: 'center'
  },
  directorText: {
    color: 'grey',
    fontSize: 12,
    marginBottom: 10,
    textAlign: 'center'
  },
  openingText: {
    textAlign: 'center'
  }
});
AppRegistry.registerComponent('SearchHeader', () => SearchHeader);

  • 답변 # 1

    navigation 를 통과해야합니다  아래로 내립니다. 이것을 시도하십시오 :

    renderHeader = () => {
       return (<SearchHeader navigation={this.props.navigation} />);
    };
    
    

  • 답변 # 2

    withNavigation(Component) 로 구성 요소를 포장해야합니다.

    예 : AppRegistry.registerComponent('SearchHeader', () => withNavigation(SearchHeader));

    탐색의 요점은 네비게이션을 소품으로 전달할 필요가 없도록하는 것이었다. 여러 자녀를 겪을 때 특히 유용합니다.

관련 자료

  • 이전 io - Java 스캐너 클래스 hasNext () 메소드 BUG
  • 다음 jquery - Javascript 양식 유효성 검사 onclick 버튼 오류가 없지만 작동하지 않습니다