largList

android/app/build.gradle

@@ -138,6 +138,8 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-linear-gradient')
+    implementation project(':react-native-device-info')
     implementation project(':react-native-spring-scrollview')
     implementation project(':react-native-gesture-handler')
     implementation project(':react-native-vector-icons')

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

@@ -3,6 +3,8 @@ package com.basicapp;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.BV.LinearGradient.LinearGradientPackage;
+import com.learnium.RNDeviceInfo.RNDeviceInfo;
 import com.bolan9999.SpringScrollViewPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactNativeHost;
@@ -25,6 +27,8 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new LinearGradientPackage(),
+            new RNDeviceInfo(),
             new SpringScrollViewPackage(),
             new VectorIconsPackage()
       );

android/settings.gradle

 rootProject.name = 'BasicApp'
+include ':react-native-linear-gradient'
+project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
+include ':react-native-device-info'
+project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
 include ':react-native-spring-scrollview'
 project(':react-native-spring-scrollview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spring-scrollview/android')
 include ':react-native-vector-icons'

package.json

@@ -15,9 +15,11 @@
     "moment": "^2.24.0",
     "react": "16.8.3",
     "react-native": "0.59.5",
+    "react-native-device-info": "^2.1.1",
     "react-native-elements": "^1.1.0",
     "react-native-gesture-handler": "^1.1.0",
     "react-native-largelist-v3": "^3.0.14",
+    "react-native-linear-gradient": "^2.5.4",
     "react-native-spring-scrollview": "^2.0.22",
     "react-native-update-mutlirn-hg": "^3.1.1",
     "react-native-vector-icons": "^6.4.2",

src/BasicNavigator/navigationStack.js

@@ -8,7 +8,7 @@ import {
 } from 'react-navigation';
 import JSPage from '../jsComponent/JSPage';
 import FramePage from '../home/FramePage';
-import ThemePage from '../themePage';
+import ThemePage from '../changeThemePage';
 import NativeComponentList from '../home/NativeComponentList';
 import JSComponentList from '../home/JSComponentList';
 import NativePage from '../nativeComponent/NativePage';

src/themePage/index.js → src/changeThemePage/index.js

@@ -18,14 +18,14 @@ import { compose } from 'redux';
 import { push, tab } from '../BasicNavigator/actions';
 import themeType from '../theme';
 import themeAction from '../theme/action';
-
+import NavigationBar from '../components/NavigationBar';
+import BackButton from '../components/BackButton';
+import Button from '../components/ThemeButton';
 
 type Props = {};
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
   instructions: {
@@ -37,37 +37,42 @@ const styles = StyleSheet.create({
 
 
 class ThemePage extends Component<Props> {
-
   render() {
-    const { theme, setCurrentTheme } = this.props
+    const { theme, setCurrentTheme } = this.props;
     return (
       <View style={styles.container}>
-        <Text style={styles.instructions}>ThemeDemo</Text>
-        <TouchableOpacity onPress={() => {
+        <NavigationBar
+          left={<BackButton />}
+          title="ThemeDemo"
+        />
+        <Button
+          containerStyle={{ height: 40, margin: 10 }}
+          onPress={() => {
             setCurrentTheme(themeType.blackTheme);//Object.assign
           }}
-        >
-          <Text style={styles.instructions, { color: theme.themeColor }}>启动黑色主题</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => {
+          title="切换黑色主题"
+        />
+        <Button
+          containerStyle={{ height: 40, margin: 10 }}
+          onPress={() => {
             setCurrentTheme(themeType.defaultTheme);//Object.assign
           }}
-        >
-          <Text style={styles.instructions, { color: theme.themeColor }}>启动蓝色主题</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => {
+          title="切换蓝色主题"
+        />
+        <Button
+          containerStyle={{ height: 40, margin: 10 }}
+          onPress={() => {
             setCurrentTheme(themeType.redTheme);//Object.assign
           }}
-        >
-          <Text style={styles.instructions, { color: theme.themeColor }}>启动红色主题</Text>
-        </TouchableOpacity>
+          title="切换红色主题"
+        />
       </View>
     );
   }
 }
 
 function propsMapping(props) {
-  const { nav, theme } = props
+  const { nav, theme } = props;
   return {
     nav,
     theme,

src/components/BackButton/index.js

+/**
+ * @flow
+ */
+
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { connect } from 'react-redux';
+import Index from '../BasicIcon';
+import { pop } from '../../BasicNavigator/actions';
+import StyleSheet from '../../utils/StyleSheet';
+
+
+const styles = StyleSheet.create({
+  backButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 10,
+  },
+  buttonIOSAndroid: {
+    width: 90,
+    ios: {
+      paddingTop: 0,
+      height: 44,
+    },
+    android: {
+      paddingTop: 0,
+      height: 44,
+    },
+    justifyContent: 'center',
+  },
+})
+
+type BackButtonType = {
+  onBackPressed: ()=>void,
+  routes: Array,
+  imageUrl?: any,
+}
+
+function BackButton({ onBackPressed, imageUrl }: BackButtonType) {
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        onBackPressed()
+      }}
+      style={styles.backButton}
+    >
+      <View
+        style={styles.buttonIOSAndroid}
+      >
+        <Index suite="Ionicons" name="ios-arrow-back" size={26} color="white" />
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const actionMapping = (dispatch, props) => ({
+  onBackPressed: props.onBackPressed || (() => {
+    console.log('BackButton:', props)
+    if (props.routes && props.routes.length === 1) {
+
+    } else {
+      dispatch(pop());
+    }
+  }),
+})
+export default connect(null, actionMapping)(BackButton);

src/components/BasicIcon.js → src/components/BasicIcon/index.js

@@ -40,7 +40,7 @@ export type IconType = {
   size?: number,
 }
 
-export default function BasicIcon(props: IconType) {
+export default function Index(props: IconType) {
   const { suite, ...extraProps } = {
     color: 'white',
     size: 30,

src/components/NavigationBar/index.js

+/**
+ * @flow
+ */
+
+import React, { Element } from 'react';
+import { connect } from 'react-redux';
+import {
+  View,
+  Text,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
+import DeviceInfo from 'react-native-device-info';
+import LinearGradient from 'react-native-linear-gradient';
+import StyleSheet from '../../utils/StyleSheet';
+
+export const isLessKitKat = Platform.OS === 'android' && Platform.Version > 19;
+
+export const androidTop = isLessKitKat ? 0 : 24;
+
+const systemVersion = DeviceInfo.getSystemVersion();
+
+const styles = StyleSheet.create({
+  navBarContainer: {
+    ios: {
+      marginTop: parseInt(systemVersion, 10) < 11 ? 20 : 0,
+      height: 64,
+    },
+    android: {
+      paddingTop: androidTop,
+      height: 44 + androidTop,
+    },
+    iPad: {
+      height: 98,
+    },
+    androidPad: {
+      height: 88,
+    },
+    backgroundColor: '#0074E1',
+    // backgroundColor: 'rgb(42,85,161)',
+    flexDirection: 'row',
+  },
+  left: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  right: {
+    flex: 1,
+    flexDirection: 'row-reverse',
+  },
+  navStyle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    textAlign: 'center',
+    phone: {
+      fontSize: 18,
+    },
+    pad: {
+      fontSize: 24,
+    },
+    color: 'white',
+    alignSelf: 'center',
+  },
+});
+
+export type NavBarPropsType = {
+  left?: Element<*>,
+  title?: string,
+  titleStyle?: Object,
+  right?: Element<*>,
+  style?: Object,
+  fontStyle?: Object,
+  onPress?: ()=>void,
+  textStyle?:Object,
+  theme:Object,
+}
+
+function NavigationBar(props: NavBarPropsType) {
+  const {
+    style, titleStyle, left, onPress, textStyle, fontStyle, title, right, theme,
+  } = props;
+  if (theme.navEndColor) {
+    return (
+      <LinearGradient
+        start={{ x: 0.0, y: 0.25 }}
+        end={{ x: 0.5, y: 1.0 }}
+        locations={[0, 1]}
+        colors={[theme.themeColor, theme.navEndColor]}
+        style={[styles.navBarContainer, { backgroundColor: theme.themeColor }, style]}
+      >
+        <View style={[styles.left, titleStyle]}>{left}</View>
+        <TouchableOpacity style={styles.navStyle} activeOpacity={1} onLongPress={onPress}>
+          <Text style={[styles.title, textStyle, fontStyle]}>{title}</Text>
+        </TouchableOpacity>
+        <View style={styles.right}>{right}</View>
+      </LinearGradient>
+    );
+  }
+  return (
+    <View style={[styles.navBarContainer, { backgroundColor: theme.themeColor }, style]}>
+      <View style={[styles.left, titleStyle]}>{left}</View>
+      <TouchableOpacity style={styles.navStyle} activeOpacity={1} onLongPress={onPress}>
+        <Text style={[styles.title, textStyle, fontStyle]}>{title}</Text>
+      </TouchableOpacity>
+      <View style={styles.right}>{right}</View>
+    </View>
+  );
+}
+
+function propsMapping({ theme }) {
+  return {
+    theme,
+  };
+}
+
+export default connect(propsMapping, null)(NavigationBar);

src/components/TabOptions/TabButton.js

@@ -6,7 +6,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 import { View, Text } from 'react-native';
-import BasicIcon from '../BasicIcon';
+import Index from '../BasicIcon';
 
 type Props = {}
 
@@ -16,7 +16,7 @@ class TabButton extends Component<Props> {
     const color = focused ? theme.themeColor : theme.Colors.charcoal;
     return (
       <View style={{ alignItems: 'center' }}>
-        <BasicIcon
+        <Index
           style={{ margin: 0, padding: 0 }}
           suite={iconSuite}
           name={tabBarIconName}

src/components/ThemeButton/index.js

+/**
+ * @flow
+ * Created by Rabbit on 2019-04-30.
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import { Button } from 'react-native-elements';
+import LinearGradient from 'react-native-linear-gradient';
+
+function ThemeButton(props) {
+  const { theme, buttonStyle } = props;
+  if (theme.navEndColor) {
+    return (
+      <Button
+        {...props}
+        ViewComponent={LinearGradient} // Don't forget this!
+        buttonStyle={[buttonStyle, { backgroundColor: theme.themeColor }]}
+        linearGradientProps={{
+          colors: [theme.themeColor, theme.navEndColor],
+          start: { x: 0, y: 0.5 },
+          end: { x: 1, y: 0.5 },
+        }}
+      />
+
+    );
+  }
+  return (
+    <Button
+      {...props}
+      buttonStyle={[buttonStyle, { backgroundColor: theme.themeColor }]}
+    />
+  );
+}
+
+function propsMapping({ theme }) {
+  return {
+    theme,
+  };
+}
+
+export default connect(propsMapping, null)(ThemeButton);

src/home/FramePage.js

@@ -13,10 +13,11 @@ import { LargeList } from 'react-native-largelist-v3';
 import {
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
 } from 'react-native';
+import Button from '../components/ThemeButton';
 import { push } from '../BasicNavigator/actions';
+import NavigationBar from '../components/NavigationBar';
 
 
 type
@@ -87,14 +88,17 @@ Row
         sContent.items.push(row);
       }
       data.push(sContent);
-
     }
     return (
       <View style={styles.container}>
-
-        <TouchableOpacity onPress={() => { this.props.push('ThemePage'); }}>
-          <Text style={styles.instructions}>Frame</Text>
-        </TouchableOpacity>
+        <NavigationBar
+          title="Frame"
+        />
+        <Button
+          containerStyle={{ height: 40, margin: 10 }}
+          onPress={() => { this.props.push('ThemePage'); }}
+          title="Frame"
+        />
         <LargeList
           style={styles.container}
           data={data}
@@ -114,6 +118,10 @@ function actionMapping(dispatch) {
     push: compose(dispatch, push),
   };
 }
-//const mapDispatchToProps = dispatch => (bindActionCreators({goNext}, dispatch))
+function propsMapping({ theme }) {
+  return {
+    theme,
+  };
+}
 
-export default connect(null, actionMapping)(FramePage);
+export default connect(propsMapping, actionMapping)(FramePage);

src/home/NativeComponentList.js

@@ -9,21 +9,21 @@
 import React, { Component } from 'react';
 import {
   StyleSheet,
-  Text,
+  Image,
   View,
 } from 'react-native';
-
+import { WaterfallList } from 'react-native-largelist-v3';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { push } from '../BasicNavigator/actions';
+import NavigationBar from '../components/NavigationBar';
 
+const cookData = require('./data.json').data.list;
 
 type Props = {};
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
   instructions: {
@@ -34,11 +34,24 @@ const styles = StyleSheet.create({
 });
 
 class NativeComponentList extends Component<Props> {
+  state = { data: [...cookData, ...cookData, ...cookData, ...cookData, ...cookData] };
+
+  _renderItem = item => <Image source={{ uri: item.showimg }} style={{ flex: 1, margin: 5 }} />;
+
   render() {
-    console.log('ServicePage', this.props);
     return (
       <View style={styles.container}>
-          <Text style={styles.instructions}>NativeComponentList</Text>
+        <NavigationBar
+          title="NativeComponentList"
+        />
+        <WaterfallList
+          data={this.state.data}
+          heightForItem={item => SCREEN_WIDTH / Math.floor(SCREEN_HEIGHT / 150)
+            * +item.showimg_height / +item.showimg_width}
+          numColumns={2}
+          // preferColumnWidth={150}
+          renderItem={this._renderItem}
+        />
       </View>
     );
   }

src/theme/default/index.js

@@ -7,8 +7,9 @@ import Metrics from '../Metrics';
 import Images from '../Images';
 import ApplicationStyles from '../ApplicationStyles';
 
-const themeColor = Colors.facebook
+const themeColor = '#0091FF';
+const navEndColor = '#00C7FD';
 
 export default {
-  Colors, Fonts, Images, Metrics, ApplicationStyles, themeColor,
+  Colors, Fonts, Images, Metrics, ApplicationStyles, themeColor, navEndColor,
 };

src/theme/red/index.js

@@ -7,8 +7,9 @@ import Metrics from '../Metrics';
 import Images from '../Images';
 import ApplicationStyles from '../ApplicationStyles';
 
-const themeColor = Colors.fire
+const themeColor = '#F52F52';
+const navEndColor = '#F65542';
 
 export default {
-  Colors, Fonts, Images, Metrics, ApplicationStyles, themeColor
+  Colors, Fonts, Images, Metrics, ApplicationStyles, themeColor, navEndColor,
 };

yarn.lock

@@ -6280,6 +6280,11 @@ react-native-debugger-open@^0.3.19:
     minimist "^1.2.0"
     semver "^5.4.1"
 
+react-native-device-info@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-2.1.1.tgz#c6ddc022033756a5e4c5899eb83e390b5a18cc17"
+  integrity sha512-H0qq9UdP3zGESYH4HMPuv2A/FwOMszVbktj0JWuT/eVhW97PyRkYcobhFd1ggW0U+ksVSewSyX+JenQejGp7+w==
+
 react-native-elements@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-native-elements/-/react-native-elements-1.1.0.tgz#f99bcda4459a886f3ab4591c684c099d37aedf2b"
@@ -6307,6 +6312,11 @@ react-native-largelist-v3@^3.0.14:
   resolved "https://registry.yarnpkg.com/react-native-largelist-v3/-/react-native-largelist-v3-3.0.14.tgz#0b03dc588ed90f90432361f91ffa26d8e529e7c0"
   integrity sha512-eom9InjkKCGjFESft3/BmkNttV3EFOhSisd4DKDe/dAaj0+ySt+ukUTSv9AVnLim6HW3MiUkfNgMBxckoVyDqg==
 
+react-native-linear-gradient@^2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.4.tgz#dce133526f5a5510a639af94544f1ed0c984bd1e"
+  integrity sha512-FF1NhlerA4uBiS0gFIHa4FBp8/aftv4vPj14Y47lGNkYjSI94tnI6oYO3EfUxXjEyCUPiOVNKZOB9kScyjc5Ew==
+
 react-native-ratings@^6.3.0:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/react-native-ratings/-/react-native-ratings-6.3.1.tgz#4e4bd87f376423dc62c933f570fc1932c78adaa4"