【React Navigation】十三、在任意组件中使用navigation属性

withNavigation是一个更高阶的组件，它可以将navigation属性传递给一个包装好的组件。当您无法直接将navigation传递到组件中，或者不想在深层嵌套的子项中传递它时，它将很有用。

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

export default class MyBackButton extends React.Component {
  render() {
    // This will throw an 'undefined is not a function' exception because the navigation
    // prop is undefined.
    return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
  }
}

要处理上边出现的异常，你可以在屏幕渲染时将navigation传递给MyBackButton，如：

或者，您可以使用withNavigation函数来自动提供navigation。此函数的行为与Redux的connect函数类似，connect为它包装的组件提供dispatch，而withNavigation则为组件提供navigation。

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class MyBackButton extends React.Component {
  render() {
    return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
  }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyBackButton);

完整可执行代码：

import React from 'react';
import { View, Text, TouchableHighlight,Button } from 'react-native';
import {
  createStackNavigator,
  createBottomTabNavigator,
  createDrawerNavigator,
  withNavigation,
} from 'react-navigation';

class MyBackButton extends React.Component {
  render() {
    return <Button title="Back" onPress={() => { this.props.navigation.navigate('Details') }} />;
  }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
const MyButton = withNavigation(MyBackButton);

const Placeholder = ({ text }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>{text}</Text>
  </View>
);

class FeedScreen extends React.Component {
	
  
  render() {
    return (
		<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
			<MyButton />
		</View>
	);
  }
}
FeedScreen.navigationOptions = {
	title: "FeedScreen",
};

class DetailsScreen extends React.Component {
  render() {
    return <Placeholder text="DetailsScreen!" />;
  }
}
DetailsScreen.navigationOptions = {
	title: "DetailsScreen",
};

class ProfileScreen extends React.Component {
  render() {
    return <Placeholder text="ProfileScreen!" />;
  }
}

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  Details: DetailsScreen,
});

export default createDrawerNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

FeedStack.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) {
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};

Comments