javascript - 未定义不是对象(评估 '_this.props.navigation' )

Question

With Class I can pass routes. but in Function I can't. I've used WithNavigation and not, but it doesn't work. This is my Tabs Page. And I'm trying to call 'Recipe' Route.

import React from 'react';

//~/ images assets
import cashboard from '~/assets/cashboard.png';
import contact from '~/assets/contact.png';
import recipe from '~/assets/recipe.png';

//~/ pages imports

import { Container, TabsContainer, TabItem, TabText, TabIcon } from './styles';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { withNavigation } from 'react-navigation';

function Tabs({ translateY }) {
  return (
    <Container style={{
      transform: [{
        translateY: translateY.interpolate({
          inputRange: [-220, 0, 0],
          outputRange: [-220, 0, 0],
          extrapolate: 'clamp'
        })
      }]
    }}
    >

This is the rest of my Tab Code when I'm using styled-components.

<TabsContainer>
          <TouchableOpacity >
            <TabItem>
              <TabIcon source={recipe} />
              <TabText>Receitas</TabText>
            </TabItem>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Expenses')}
          >
            <TabItem>
              <TabIcon source={cashboard} />
              <TabText>Despesas</TabText>
            </TabItem>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Contact')}
          >
            <TabItem>
              <TabIcon source={contact} />
              <TabText>Contato</TabText>
            </TabItem>
          </TouchableOpacity>
        </TabsContainer>
    </Container>
  );
}

export default withNavigation(Tabs)

This is my Route.js with all my imports. Login to Home Page I got it. Because it was a Class and not a function. But in Function I can't call the route.

const Routes = createAppContainer(
  createStackNavigator({
    //  Main: {
    //    screen: Main,
    //    navigationOptions: {
    //      header: null,
    //    }
    //  },
      Home: {
        screen: Home,
        navigationOptions: {
          title: 'Home',
          headerLeft: null,
          headerTintColor: '#fff',
          headerTitleStyle: {fontSize: 20, alignSelf: 'center', textAlign: 'center', justifyContent: 'center', flex: 1, textAlignVertical: 'center', fontWeight: 'bold'},
          headerStyle: {backgroundColor: '#851C20'}
        }
      },
      Recipe: {
        screen: Recipe,
        navigationOptions: {
          title: 'Receita',
          headerLeft: null,
          headerTintColor: '#fff',
          headerTitleStyle: {fontSize: 20, alignSelf: 'center', textAlign: 'center', justifyContent: 'center', flex: 1, textAlignVertical: 'center', fontWeight: 'bold'},
          headerStyle: {backgroundColor: '#851C20'}
        }
      },

Answer 1

在类里面尝试一下。

const translateY = translateY; // transform
const recipe = recipe; //img path
...etc

class Tabs extends React.Component {
  render() {
    return (     <Container style={{
      transform: [{
        translateY: translateY.interpolate({
          inputRange: [-220, 0, 0],
          outputRange: [-220, 0, 0],
          extrapolate: 'clamp'
        })
      }]
    }}
    >
   ...
);
  }
}

使用

<View>
...
< Tabs />
<View />