// In App.js in a new project
import React,{Component} from "react";
import {
  View,
  Text,
  Button,
  Image
} from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

//使用自定义组件替换标题
class LogoTitle extends Component{
  render(){
    return(
      <Image
        source={require('./img/img_02.png')}
        style={{width:30,height:30}}
      />
    );
  }
}
class ThreeScreen extends Component{

  static navigationOptions ={
    title:'ThreeScreen'
  };
  render(){
    return(
      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
        <Text>ThressScreen</Text>

      </View>
    );
  }
}
class DetailsScreen extends Component{
  static navigationOptions=({navigation})=>{
    return{
      title:navigation.getParam('otherParam','A Nested Details Screen')
    };
  };
  render(){
    const {navigation} = this.props;
    const itemId = navigation.getParam('itemId','NO-ID');
    const otherParam = navigation.getParam('otherParam','some default value');
    return(
      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
        <Text>DetailsScreen</Text>
        <Text>itemId:{JSON.stringify(itemId)}</Text>
        <Text>otherParam:{JSON.stringify(otherParam)}</Text>
        <Button
          title="Go to Details... again"
          onPress={()=>this.props.navigation.navigate('Three',{
              itemId:Math.floor(Math.random()*100)
            })
          }
        />
        <Button
          title="Update the title"
          onPress={()=>this.props.navigation.setParams({otherParam:'Update!'})}
        />
      </View>
    );
  }
}

class HomeScreen extends Component {
  static navigationOptions={
    headerTitle:<LogoTitle/>,
    headerRight:(
      <Button
        onPress={()=>alert('this is a button!')}
        title = "info"
        color ="#fff"
      />
    ),
  };
  render() {
    return (
       <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={()=>{this.props.navigation.navigate('Details',{
            itemId:86,
            otherParam:'anything you want here'
          });
        }}
        />
      </View>
    );
  }
}
const AppNavigator = createStackNavigator(
  {
    Home:HomeScreen,
    Details:DetailsScreen,
    Three:ThreeScreen

  },
  {
    initialRouteName:"Home",
    defaultNavigationOptions:{
      headerStyle:{
        backgroundColor:'#fdd000'
      },
      headerTintColor:'#fff',
      headerTitleStyle:{
        fontWeight:'bold'
      }
    }
  }
);

export default createAppContainer(AppNavigator);

import React,{Component} from 'react';
import { Text, View,Button,AppRegistry,StyleSheet,Image} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';

class FiveScreen extends Component{
  static navigationOptions={
    title:'FiveScreen',
    headerBackTitle:null
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>FiveScreen!</Text>
      </View>
    );
  }
}

class FourScreen extends Component{
  static navigationOptions={
    title:'FourScreen',
    headerBackTitle:null
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>FourScreen!</Text>
      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  static navigationOptions={
    title:'DetailsScreen',
    headerBackTitle:null
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Details!</Text>
        <Button
          title = "Go to FourScreen"
          onPress={()=>this.props.navigation.navigate('Four')}
        />
      </View>
    );
  }
}

class HomeScreen extends React.Component {
  static navigationOptions={
    title:'HomeScreen',
    headerBackTitle:null,
    headerRight:(
      <Button
        title = "info"
        color = 'black'
        onPress = {()=>this.props.navigation.navigate('Five')}
      />
    )
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* other code from before here */}
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  static navigationOptions = {
    headerBackTitle:null,
    title:'SettingsScreen'
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* other code from before here */}
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
    Four:FourScreen,
    Five:FiveScreen
  },
  {
    defaultNavigationOptions:{
      headerStyle:{
        backgroundColor:'#fdd000',
      },
      headerTintColor:'#fff',
      headerTitleColor:{
        fontWeight:'bold'
      }
    }
  }
);

const SettingsStack = createStackNavigator(
  {
    Settings:{
      screen:SettingsScreen,
    } ,
    Details: DetailsScreen,
  },
  {
    defaultNavigationOptions:{
      headerStyle:{
        backgroundColor:'#fdd000',
      },
      headerTintColor:'#fff',
      headerTitleColor:{
        fontWeight:'bold'
      }
    }
  }
);


HomeStack.navigationOptions = ({ navigation }) => {

  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }
  return {
    tabBarVisible,

  };
};
SettingsStack.navigationOptions = ({ navigation }) => {

  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }
  return {
    tabBarVisible,
  };
};
export default createAppContainer(createBottomTabNavigator(
  {
    Home: {
      screen:HomeStack,
      navigationOptions: {
          tabBarLabel: '首页', // tabBar显示的文字
          tabBarIcon: ({tintColor}) => ( // tabBar显示的图标
              // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
              <Ionicons
                  name={'ios-add'}
                  size={30}
                  color={tintColor}
              />
          )
        }
    },
    Settings: {
      screen:SettingsStack,
      navigationOptions: {
          tabBarLabel: '设置', // tabBar显示的文字
          tabBarIcon: ({tintColor}) => ( // tabBar显示的图标
              // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
              <Ionicons
                  name={'ios-close'}
                  size={30}
                  color={tintColor}
              />
          )
        }
    },
  },
  {
    tabBarOptions: {
      activeTintColor: '#fdd000',
    }
  }
));

const styles = StyleSheet.create({
   tabBarIconStyle: {
      width: 30,
      height: 30,
   },
});