>

HomeIcon 라는 컴포넌트를 만들고 있습니다  내 header 에 삽입   defaultNavigationOptions 를 통해  > headerRight 나는 onPress 를 추가  이 컴포넌트에서 this.props.navigation.navigate('Main'); 를 지정하여  이 구성 요소를 클릭하면 MainScreen 가로 드됩니다.  그러나 위의 제목에서 설명한 오류가 발생하면 클릭하십시오. 코드는 다음과 같습니다.

import React from 'react';
import { StyleSheet, TouchableOpacity, Image, Dimensions } from 'react-native';
export default class HomeIcon extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={() => {
        this.props.navigation.navigate('Main');
      }}>
        <Image style={styles.buttonHome} source={require('../icons/home2.png')} />
      </TouchableOpacity>
    );
  }
}
const styles = StyleSheet.create({
  buttonHome: {
    aspectRatio: 1,
    resizeMode: 'contain',
    height: Dimensions.get('window').width * 0.08,
    width: Dimensions.get('window').height * 0.08,
    margin: Dimensions.get('window').height * 0.018
    }
});

import React from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import Main from './source/screens/MainScreen';
import CustomCards from './source/screens/CustomCardsScreen';
import HomeIcon from './source/components/HomeIcon';
const AppNavigator = createStackNavigator ({
  'Main': {
    screen: Main,
    navigationOptions: {
      title: 'Tela Principal'
    }
  },
  'CustomCards': {
    screen: CustomCards,
    navigationOptions: {
      title: 'Cartões Personalizados'
    }
  }
}, {
  defaultNavigationOptions: {
    headerTitleStyle: {
      flexGrow: 1,
      fontWeight: 'bold',
      textAlign: 'center'
    },
    headerLeft: (null),
    headerRight: (
      <HomeIcon />
    ),
    headerStyle:{
      backgroundColor: '#7d253b'
    },
    headerTintColor: '#FFF'
  }
});
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@types/react": "^16.8.13",
    "@types/react-native": "^0.57.43",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.6.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

자세한 내용은 GitHub의 프로젝트 저장소를 방문하십시오. https://github.com/Alex-Xavier/ACTIFICA

  • 답변 # 1

    defaultNavigationOptions = ({ navigation }) => ({
        headerTitleStyle: {
          flexGrow: 1,
          fontWeight: 'bold',
          textAlign: 'center',
        },
        headerLeft: (null),
        headerRight: (
           <HomeIcon navigation={navigation} />
           ),
        headerStyle: {
          backgroundColor: '#7d253b',
        },
          headerTintColor: '#FFF',
       });
    
    

  • 답변 # 2

    탐색 객체를 해당 구성 요소로 전달해야합니다. 'this.props.navigation'은 스택/탭/서랍 탐색에 직접 지정된 화면에서만 사용할 수 있습니다. 귀하의 경우 '메인'및 '맞춤 카드'화면입니다.

    HomeIcon 구성 요소는 this.props.navigation이 무엇인지 전혀 모릅니다.

    소품으로 '탐색'을 전달해야합니다. 이와 같이 :

    headerRight: ({ navigation }) => <HomeIcon  navigation={navigation}/>
    
    

    그러면 HomeIcon에서 this.props.navigation으로 사용할 수 있습니다.

관련 자료

  • 이전 sql - 더 효율적이고 작은 관련 테이블이 적거나 큰 것이 무엇입니까?
  • 다음 메이븐 릴리스 플러그인 git push가 Git Deploy 키와 작동하지 않습니다