React Navigation

Example

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation'; // Version can be specified in package.json

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

class DetailsScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

参数传递

<TouchableOpacity onPress={() => {
  return this.props.navigation.navigate("Web", {
    uri: global.config.resource + '/terms-of-service',
    title: "服务条款"
  });
}}>

接收参数

render() {
  const {state} = this.props.navigation;
  return (
    <Container>    
      <Title>{state.params.title}</Title>               
    </Container>
  );
}

回退

<Button transparent onPress={() => this.props.navigation.goBack()}>
  <Icon style={{color: '#47B9EB'}} name="ios-arrow-back"/>
  <Text style={{color: '#47B9EB'}}> 返回</Text>
</Button>

回退回调

<Button block light onPress={() => this.props.navigation.navigate("Topup", {
  onGoBack: () => this.componentDidMount(),
})}>