some update

.babelrc

@@ -3,6 +3,12 @@
   "env": {
     "production": {
       "plugins": ["react-native-paper/babel"]
-    }
+    },
+    "development": {
+      "plugins": [
+        ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        ["import", { "libraryName": "antd-mobile-rn" }]
+      ]
+    } 
   }
 }

.gitignore

@@ -54,7 +54,3 @@ buck-out/
 
 # Bundle artifact
 *.jsbundle
-
-# Jest
-#
-.jest/

App.tsx

@@ -1,49 +1,193 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
-import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-type Props = {};
-export default class App extends Component<Props> {
-  render() {
+import React, { Component } from 'react'
+import { View, Text, Image, ScrollView } from 'react-native'
+import { TabBar, SearchBar, List } from 'antd-mobile-rn'
+import { Provider } from 'mobx-react'
+import NavigationBar from 'react-native-navbar'
+import ExplorePage from './app/pages/ExplorePage'
+import MePage from './app/pages/MePage'
+import NodePage from './app/pages/NodePage'
+import subjectStore from './app/stores/subjectStore'
+
+const store = {
+  subjectStore,
+}
+
+interface State {
+  selectedTab: string
+}
+
+const rightButtonConfig = {
+  title: 'Next',
+  handler: () => alert('hello!'),
+}
+
+const titleConfig = {
+  title: 'Hello, world',
+}
+export default class App extends Component<State> {
+
+  state = {
+    selectedTab: 'redTab',
+  }
+
+  constructor(props: any) {
+    super(props);
+
+  }
+
+  renderContent(pageText: any) {
+    const Item = List.Item
+    const Brief = Item.Brief
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
+      <View style={{ width: '100%', flex: 1, alignItems: 'center', backgroundColor: 'white' }}>
+        <NavigationBar
+          style={{ width: '100%'}}
+          title={titleConfig}
+          leftButton={rightButtonConfig}
+        />
+        <ScrollView
+          style={{ width: '100%', flex: 1, backgroundColor: '#f5f5f9' }}
+          automaticallyAdjustContentInsets={false}
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+        >
+          <List renderHeader={() => 'basic'}>
+            <Item data-seed="logId">
+              标题文字点击无反馈，文字超长则隐藏，文字超长则隐藏
+            </Item>
+            <Item wrap>
+              文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
+            </Item>
+            <Item disabled extra="箭头向右" arrow="horizontal" onPress={() => {}}>
+              标题文字
+            </Item>
+            <Item extra="箭头向下" arrow="down" onPress={() => {}}>
+              标题文字
+            </Item>
+            <Item extra="箭头向上" arrow="up" onPress={() => {}}>
+              标题文字
+            </Item>
+            <Item extra="没有箭头" arrow="empty">
+              标题文字
+            </Item>
+            <Item
+              extra={
+                <View>
+                  内容内容
+                  <Brief style={{ textAlign: 'right' }}>辅助文字内容</Brief>
+                </View>
+              }
+              multipleLine
+            >
+              垂直居中对齐
+            </Item>
+            <Item extra="内容内容" multipleLine>
+              垂直居中对齐<Brief>辅助文字内容</Brief>
+            </Item>
+            <Item
+              wrap
+              extra="文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行"
+              multipleLine
+              align="top"
+              arrow="horizontal"
+            >
+              顶部对齐
+              <Brief>辅助文字内容辅助文字内容辅助文字内容辅助文字内容</Brief>
+              <Brief>辅助文字内容</Brief>
+            </Item>
+            <Item
+              extra={
+                <View>
+                  内容内容
+                  <Brief style={{ textAlign: 'right' }}>辅助文字内容</Brief>
+                </View>
+              }
+              multipleLine
+              align="bottom"
+            >
+              底部对齐
+            </Item>
+          </List>
+          <List renderHeader={() => '带缩略图'}>
+            <Item thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png">
+              thumb
+            </Item>
+            <Item
+              thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
+              arrow="horizontal"
+            >
+              thumb
+            </Item>
+            <Item
+              extra={
+                <Image
+                  source={{
+                    uri:
+                      'https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png',
+                  }}
+                  style={{ width: 29, height: 29 }}
+                />
+              }
+              arrow="horizontal"
+            >
+              extra为Image
+            </Item>
+          </List>
+        </ScrollView>
       </View>
-    );
+    )
   }
-}
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
+  onChangeTab(tabName: any) {
+    this.setState({
+      selectedTab: tabName,
+    })
+  }
+
+  render() {
+    return (
+      <Provider {...store}>
+        <TabBar>
+          <TabBar.Item
+            title="Life"
+            icon={require('./assets/images/explore.png')}
+            selectedIcon={require('./assets/images/explore-selected.png')}
+            selected={this.state.selectedTab === 'blueTab'}
+            onPress={() => this.onChangeTab('blueTab')}
+          >
+            {this.state.selectedTab === 'blueTab' && this.renderContent('Life Tab')}
+          </TabBar.Item>
+          <TabBar.Item
+            icon={require('./assets/images/hot.png')}
+            selectedIcon={require('./assets/images/hot-selected.png')}
+            title="Koubei"
+            badge={2}
+            selected={this.state.selectedTab === 'redTab'}
+            onPress={() => this.onChangeTab('redTab')}
+          >
+            {this.state.selectedTab === 'redTab' && <Text>red tab</Text>}
+          </TabBar.Item>
+          <TabBar.Item
+            icon={require('./assets/images/explore.png')}
+            selectedIcon={require('./assets/images/explore.png')}
+            title="Friend"
+            selected={this.state.selectedTab === 'greenTab'}
+            onPress={() => this.onChangeTab('greenTab')}
+          >
+            {this.state.selectedTab === 'greenTab' && <Text>green tab</Text>}
+          </TabBar.Item>
+          <TabBar.Item
+            icon={require('./assets/images/explore.png')}
+            selectedIcon={require('./assets/images/explore.png')}
+            title="My"
+            selected={this.state.selectedTab === 'yellowTab'}
+            onPress={() => this.onChangeTab('yellowTab')}
+          >
+            {this.state.selectedTab === 'yellowTab' && <Text>yellow tab</Text>}
+          </TabBar.Item>
+        </TabBar>
+      </Provider>
+
+    )
+  }
+}

android/app/build.gradle

@@ -137,7 +137,8 @@ android {
 }
 
 dependencies {
-    compile project(':react-native-vector-icons')
+    compile project(':react-native-photo-view')
+    compile project(':react-native-linear-gradient')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     implementation "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/AndroidManifest.xml

@@ -8,7 +8,7 @@
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
-      android:allowBackup="false"
+      android:allowBackup="true"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"

android/app/src/main/java/com/way/MainApplication.java

@@ -3,7 +3,8 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
-import com.oblador.vectoricons.VectorIconsPackage;
+import com.reactnative.photoview.PhotoViewPackage;
+import com.BV.LinearGradient.LinearGradientPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -24,7 +25,8 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
-            new VectorIconsPackage()
+            new PhotoViewPackage(),
+            new LinearGradientPackage()
       );
     }
 

android/settings.gradle

@@ -1,5 +1,7 @@
 rootProject.name = 'way'
-include ':react-native-vector-icons'
-project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-photo-view'
+project(':react-native-photo-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-photo-view/android')
+include ':react-native-linear-gradient'
+project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
 
 include ':app'

app/api/index.ts

@@ -0,0 +1,5 @@
+import axios from 'axios'
+
+export function getHotSubjectList() {
+  return axios.get('https://www.v2ex.com/api/topics/hot.json')
+}

app/components/SubjectView.tsx

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import { View, Text } from 'react-native'
+
+type SubjectViewProps = {
+  subject: any,
+}
+
+const SubjectView = (props: SubjectViewProps) => <View>
+    <Text>{props.subject.item.title}</Text>   
+  </View>
+
+export default SubjectView

app/pages/ExplorePage.tsx

@@ -0,0 +1,31 @@
+import React, { Component, Key } from 'react'
+import { FlatList, Text } from 'react-native'
+import { observer, inject } from 'mobx-react'
+import SubjectView from '../components/SubjectView'
+
+export interface SubjectListProps {
+  subjectStore: any
+}
+
+@inject('subjectStore')
+@observer
+class ExplorePage extends Component<SubjectListProps> {
+
+  componentDidMount() {
+    this.props.subjectStore.getHotSubjectList()
+    console.log(this.props.subjectStore.hotSubjectList)
+  }
+
+  render() {
+
+    return (
+      <FlatList
+        data={this.props.subjectStore.hotSubjectList}
+        keyExtractor={(item, index) => index.toString()}
+        renderItem={(item) => <SubjectView subject={item}/>}
+      />
+    )
+  }
+}
+
+export default ExplorePage

app/pages/MePage.tsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+import { WebView } from 'react-native'
+
+export default class MePage extends Component {
+
+  render() {
+    return (    
+      <WebView 
+        source={{uri: 'https://github.com/facebook/react-native'}}
+      />
+    )
+  }
+}

app/pages/NodePage.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+import { Text } from 'react-native-paper'
+
+export default class NodePage extends Component {
+
+  render() {
+    return (
+      <Text>node</Text>
+    )
+  }
+}