App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Platform, 
  StyleSheet,
  View,
  Text,
  Image,
  Dimensions,
  ScrollView,
  TextInput,
  Button,
  TouchableOpacity,
  Linking,
} from 'react-native';
const { width, height } = Dimensions.get('window');

import { createBottomTabNavigator, SafeAreaView,createSwitchNavigator, createStackNavigator,withNavigation } from 'react-navigation';

// import Mian from './mian_vue';
import Mian from './app/index';

import Setup from './app/page/registered/Setup';

import QRvue from './app/page/qrcode/QRvue';
import Btn_Qrcode from './app/page/home/Btn_Qrcode';
import Btn_Search from './app/page/home/Btn_Search';
import Btn_Remind from './app/page/home/Btn_Remind';

import Login_index from './Login_index';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or59487 shake for dev menu',
  android:
    'Double tap R on your keyboard 9487to reload,\n' +
    'Shake or press menu button for dev menu',
});


type Props = {};


class DetailsScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    // headerTitle: <Top />,
    title: 'Details',

  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>

        <Button
          title="GoBack"
          onPress={() => this.props.navigation.goBack().Alert("hi")}

        />

<Button
          title="console"
          onPress={() => console.warn(this.props)
        }

        />
        
      </View>
    );
  }
}


class MyBackButton extends React.Component {
  render() {
    return <Button title="Back" onPress={() => { this.props.navigation.push('Details')}} />;
  }
}
class Welcome extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome
        </Text>
        <Button
          title='go'
          onPress={() => { this.props.navigation.navigate('Welcome1') }}
        />
      </View>
    );
  }
}

class Welcome1 extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome1
        </Text>
        <Button
          title='go'
          onPress={() => { this.props.navigation.navigate('Login') }}
        />
      </View>
    );
  }
}
// export default withNavigation(MyBackButton);

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    // tabBarComponent: <TTOOPP />,
      headerTitle:<Btn_Search/>,
    //  headerTitle:<Text >FUCK</Text>,
    headerStyle: {
      // backgroundColor: '#f4511e',
      backgroundColor: '#7592A9',
          ///上方tab bar 顏色 iphone X 上瀏海 顏色

      activeTintColor: '#2562b4',      
      },
      indicatorStyle: {
        height: 1,
    }, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？
    headerColor:"red",
     headerLeft: (  //定义导航栏右侧的按钮
      // <Text style={{width:1}}></Text>
      <Btn_Qrcode/>

      ),
      headerMode:'screen',
      headerTitleStyle:{flex:1, alignItems: 'center',textAlign: 'center',justifyContent: 'center'},

      // headerLeftContainerStyle: {paddingRight: 100},
      headerRight:(  //定义导航栏右侧的按钮
        // <Text style={{width:1}}></Text>
        <Btn_Remind/>
  
        ),
        
  //  headerTitle:  
  //   <Button
  //   title="Go to Details"
  //   onPress={() => console.warn(DetailsScreen())}
  // />
//<Btn_Qrcode/>
    //title: 'Details',

};




  render() {
    return (
      // <SafeAreaView style={styles.container}>

      <View style={styles.container}>
       

          {/* <View style={styles.home}> */}
          <Mian/> 
          {/* <Login_index/> */}
          {/* <Button
    title="Go to Details"
    onPress={() => this.props.navigation.push('Details')}
  /> */}
          {/* </View> */}

      </View>
      //</SafeAreaView> 
    );
  }
}

const RootStack = createStackNavigator(
  {
    Login:{screen:Login_index},

    Home:{ screen: HomeScreen } ,
    
    QRvue:{ screen: QRvue},
    Setup:{screen:Setup},

    Details:{ screen: DetailsScreen},
    
  },
  {
    initialRouteName: 'Login',
    
  }
);

const Hello_Stack = createSwitchNavigator({
  Welcome,
  Welcome1,
  App: RootStack
})



export default class App extends Component<Props> {


  render() {
    return (
      // <Hello_Stack onNavigationStateChange={(prevState, currentState) => { console.log(currentState) }} />
                // <Hello_Stack />
<SafeAreaView style={{flex: 1, backgroundColor: 'red'}} forceInset={{ bottom: 'never' ,top: 'never' }}>
                  <RootStack />
                  </SafeAreaView>

    );
  }
}

////消除多餘安全邊距 https://reactnavigation.org/docs/zh-Hans/handling-iphonex.html
const styles = StyleSheet.create({
  container: {
    flex: 1,

    backgroundColor: '#F5FCFF',
  },
  home: {
    flex: 16,
    flexDirection: 'column',
  },

  
  logo: {
    height: 120,
    marginBottom: 16,
    marginTop: 64,
    padding: 10,
    width: 135,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#DDDDDD',
    marginBottom: 5,
  },
  modules: {
    margin: 20,
  },
  modulesHeader: {
    fontSize: 16,
    marginBottom: 8,
  },
  module: {
    fontSize: 14,
    marginTop: 4,
    textAlign: 'center',
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    margin: 10,
    borderRadius: 5,
    padding: 5,
  },
  navLeft: {
    alignItems: 'center',
    marginLeft: 10,
  },
  navRight: {
    alignItems: 'center',
    marginRight: 10,
  },
  navIcon: {
    height: 20,
    width: 20,
  },
  navText: {
    fontSize: 10,
  },
  searchBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: width * 0.7,
    backgroundColor: '#ededed',
    borderRadius: 5,
    height: 30,
  },
  searchIcon: {
    width: 16,
    height: 16,
    marginRight: 6,
  },
  searchContent: {
    color: '#666',
    fontSize: 14,
  },
  tabBarUnderline: {
    backgroundColor: '#b4282d',
    height: 2,
    width: width / 8,
    marginLeft: 6
  }
});