xntalk / xntalk-rnapp

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

import React from 'react';
import {
  StyleSheet,
  View,
  Platform,
  TouchableOpacity,
  NativeModules,
  Image
} from 'react-native';
// 6.X版本后RN里的NetInfo已经过时，无法调用，以下是官方推荐
import NetInfo from "@react-native-community/netinfo";
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import {xnToast} from "./src/utils/utils";
import AppService from "./src/service/AppService";
import Home from './src/pages/home';

const Stack = createStackNavigator();

// 头部组件还没改造，这里先在本地做出关闭效果
const headerRight = (
    <View style={{backgroundColor:'rgba(0, 0, 0, 0.25)',paddingLeft:13,paddingRight:13,height:32,flexDirection:'row',alignItems:'center',borderColor:'#EAEAEA',borderWidth:0.5,borderRadius:16,marginRight:13}}>
      <TouchableOpacity style={{flex:1,height:32,justifyContent:'center',alignItems:'center'}} onPress={()=>{
        NativeModules.system.navTo('BACK');}}>
        <Image
            style={{width:18,height:18}}
            source={require('./src/img/NAV/blackClose.png')}
        />
      </TouchableOpacity>
    </View>
);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      AnnounceList:[],
      ownCount:0,
      loading:true,
      loadMore:false,
      key:'',
      type:'',
      imageAvatar:{},
      random:0,
      code:global.code,
      modalShow: true
    };
    if (Object.getOwnPropertyNames(props).length > 0) {
      global.initParam = {};
      for (let key in props) {
        global.initParam[key] = props[key];
      }
    }
  }

  static navigationOptions = ({navigation,screenProps}) => {
    console.log("-------navigation---------screenProps----------");
    console.log(navigation);
    console.log(screenProps);
    return ({
      // 这里面的属性和App.js的navigationOptions是同样的。
      headerStyle: {backgroundColor: screenProps ? screenProps.themeColor : '#00ff00'},
      title: "叫我首页",
      headerRight: <RightButton title="右侧菜单" method={() => {
        console.log("点击了我");
      }}/>,
      // header:null
    })
  }

  componentDidMount() {
    let _this = this;
    // NetInfo.addEventListener('change', function (isConnected) {
    //   if (isConnected.toLocaleLowerCase() != 'none') {
    //     global.isConnected = true;
    //   } else {
    //     global.isConnected = false;
    //   }
    // });

    NativeModules.security.getIdentityId().then((result) => {
          this.state.loading = false;
          global.identityId = result;
          AppService.getUserCode({}).then((data) => {
            if (data && data.code) {
              global.code = data.code;
            }
            _this.setState({
              loading: false
            });
          }).catch((error) => {
            this.setState({
              loading: false
            });
            xnToast(error)
          });

          //     });
        }
    ).catch((error) => {
      console.log(error)
    });

    if (Platform.OS == 'android') {
      NetInfo.fetch().then(state => {
        if (state.isConnected) {
          global.isConnected = true;
        } else {
          global.isConnected = false;
        }
      });
    }
  };

  render() {
    return (
        <View style={styles.root}>
            {!this.state.loading && <NavigationContainer>
                <Stack.Navigator
                    screenOptions={{                 //用来定制头部信息、根据自己需要更改
                        title: '',
                        headerStyle: {
                          elevation: 0,   //去掉阴影
                          borderBottomWidth: 0, // 底部的线
                          backgroundColor: '#37BF63',
                          borderBottomColor:'#37BF63'
                        },
                        headerTintColor: '#fff',
                        headerTitleStyle: {
                            fontWeight: 'bold',
                            fontSize: 20
                        },
                      headerTransparent: true,
                      headerRight: () => (
                          headerRight
                      ),
                    }}
                >
                    <Stack.Screen
                        name="Home" component={Home} />
                </Stack.Navigator>
            </NavigationContainer>}
        </View>
    );
  }
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor:'#37BF63'
  }
});
export default App;

// Tab导航样例
// import * as React from 'react';
// import {Button, View,Text} from 'react-native';
//
// import {NavigationContainer} from '@react-navigation/native';
// import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
// //import {createDrawerNavigator} from '@react-navigation/drawer';
// import {
//     createStackNavigator
// } from '@react-navigation/stack'
//
// function HomeScreen() {
//   return (
//     <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
//       <Text>Home!</Text>
//     </View>
//   );
// }
//
// function SettingsScreen() {
//   return (
//     <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
//       <Text>Settings!</Text>
//     </View>
//   );
// }
//
// const Tab = createBottomTabNavigator();
//
// export default function App() {
//     return (
//         // <View><Text>{111111}</Text></View>
//             <NavigationContainer>
//       <Tab.Navigator>
//         <Tab.Screen name="Home" component={HomeScreen} />
//         <Tab.Screen name="Settings" component={SettingsScreen} />
//       </Tab.Navigator>
//     </NavigationContainer>
//     );
// }

// 抽屉导航样例
// import * as React from 'react';
// import {Button, Text, View} from 'react-native';
// import {NavigationContainer} from '@react-navigation/native';
// // import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
//  import {createDrawerNavigator} from '@react-navigation/drawer';
//
// function HomeScreen({navigation}) {
//   return (
//     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
//       <Button
//         onPress={() => navigation.navigate('Notifications')}
//         title="Go to notifications"
//       />
//     </View>
//   );
// }
//
// function NotificationsScreen({navigation}) {
//   return (
//     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
//       <Button onPress={() => navigation.goBack()} title="Go back home" />
//     </View>
//   );
// }
//
// // const Drawer = createDrawerNavigator();
//
// export default function App() {
//   return (
//       <View><Text>{11111}</Text></View>
//   );
// }