Question

使用Class I，我可以通过路线。但是在功能上我不能。我没有使用WithNavigation，但是它不起作用。这是我的标签页。而且我正在尝试将其称为“配方”路线。

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'
        })
      }]
    }}
    >

这是我使用样式化组件时其余的Tab代码。

<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)

这是我所有导入的Route.js。登录到主页我知道了。因为它是一个类而不是一个函数。但是在Function中，我无法调用路由。

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 />

未定义不是对象（评估'_this.props.navigation'）

1 个答案: