语言切换

.idea/jsLibraryMappings.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="ECMAScript 6" />
+  </component>
+</project>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="JSX" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/mycard-store.iml" filepath="$PROJECT_DIR$/.idea/mycard-store.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/mycard-store.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

src/App.css

@@ -93,7 +93,8 @@
 }
 
 .ant-layout-footer{
-  text-align: right
+  display: flex;
+  justify-content: space-between;
 }
 
 .ant-card-head-title{
@@ -192,3 +193,15 @@
   height: 40px;
   width: 180px
 }
+
+.changelanguage{
+  display: flex;
+  line-height:30px;
+}
+.changelanguage>i{
+  line-height:30px;
+}
+li>.changelanguage{
+  display: flex;
+  line-height:30px;
+}
\ No newline at end of file

src/App.js

@@ -7,7 +7,7 @@ import config from './config'
 import i18Data from '../i18data.json'
 
 import { FormattedMessage } from 'react-intl'
-import { Layout, Row, Col, Button, Card, Timeline } from 'antd'
+import { Layout, Row, Col, Button, Card, Timeline, Dropdown, Menu, Icon } from 'antd'
 
 const { Content, Footer, Header } = Layout
 
@@ -86,15 +86,34 @@ export default class App extends Component {
     return data
   }
 
+  changeLanguage(language){
+    localStorage.setItem('language',language);
+    history.go(0);
+  }
+
   handleClick = (e) => {
     console.log('click ', e);
   }
 
   render() {
     const { latest, isMobile, stats } = this.state
-    const { language } = this.props
-    const realData = i18Data[language] ? i18Data[language] : i18Data['zh-CN']
-
+    const language = localStorage.getItem('language') || this.props.language
+    const realData = i18Data[language] ? i18Data[language] : i18Data[this.props.language] ? i18Data[this.props.language] : i18Data['zh-CN']
+
+    const menu = (
+      <Menu style={{transform: 'translateX(-16px)'}}>
+        <Menu.Item key="0">
+          <a onClick={() => this.changeLanguage('en-US')} className='changelanguage'> 
+          <img alt="img" src={require('../public/USFlag.png')}/> 
+          &nbsp;English</a>
+        </Menu.Item>
+        <Menu.Item key="1">
+          <a onClick={() => this.changeLanguage('zh-CN')} className='changelanguage'> 
+          <img alt="img" src={require('../public/CNFlag.png')}/> 
+          &nbsp;中文</a>
+        </Menu.Item>
+      </Menu>
+    );
 
     return (
       <Layout>
@@ -282,8 +301,19 @@ export default class App extends Component {
 
 
         
-
         <Footer>
+        <div>
+          <Dropdown overlay={menu} trigger={['click']}>
+            {language=='en-US'?
+            (<a className="ant-dropdown-link changelanguage" href="#">
+              <img alt="img" src={require('../public/USFlag.png')}/>
+              &nbsp;English <Icon type="down" class="flag"/>
+            </a>):(<a className="ant-dropdown-link changelanguage" href="#">
+              <img alt="img" src={require('../public/CNFlag.png')}/>
+              &nbsp;中文 <Icon type="down" class="flag"/>
+            </a>)}
+          </Dropdown>
+        </div>
           © MoeCube 2017 all right reserved.
         </Footer>
       </Layout>

src/Translate.js

@@ -6,7 +6,7 @@ import localeData from '../i18n.json'
 
 
 addLocaleData([...en, ...zh])
-const language = navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
+const language = localStorage.getItem('language') || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
 
 const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];