组件列表

src/BasicNavigator/navigationStack.js

@@ -15,6 +15,12 @@ import SectionListDemo from '../pages/sectionListDemo';
 import NativePage from '../pages/navigationDemo/NativePage';
 import ButtonPage from '../pages/buttonDemo';
 import WaterList from '../pages/waterListDemo';
+import AvatarPage from '../pages/avatarDemo';
+import BadgePage from '../pages/badgeDemo';
+import CheckBoxPage from '../pages/checkBoxDemo';
+import RatingPage from '../pages/ratingDemo';
+import SliderPage from '../pages/sliderDemo';
+
 import { initialRouteName, RootPageInitialName } from '../utils/constants';
 import { TabOptions } from '../components/TabOptions';
 
@@ -30,7 +36,7 @@ const TabPage = createBottomTabNavigator(
     },
     ServicePage: {
       screen: JSComponentList,
-      navigationOptions: () => TabOptions('JS', 'Ionicons', 'logo-facebook'),
+      navigationOptions: () => TabOptions('JS', 'Ionicons', 'logo-facebook', '1'),
     },
   },
   {
@@ -93,6 +99,21 @@ const navigator = createStackNavigator({
   WaterList: {
     screen: WaterList,
   },
+  AvatarPage: {
+    screen: AvatarPage,
+  },
+  BadgePage: {
+    screen: BadgePage,
+  },
+  CheckBoxPage: {
+    screen: CheckBoxPage,
+  },
+  RatingPage: {
+    screen: RatingPage,
+  },
+  SliderPage: {
+    screen: SliderPage,
+  },
 }, {
   initialRouteName,
   headerMode: 'none',

src/components/TabOptions/TabButton.js

@@ -6,14 +6,19 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 import { View, Text } from 'react-native';
+import { Badge } from 'react-native-elements';
 import Index from '../BasicIcon';
 
 type Props = {}
 
 class TabButton extends Component<Props> {
   render() {
-    const { theme, iconSuite, tabBarIconName, tabBarTitle, focused } = this.props
+    const {
+      theme, iconSuite, tabBarIconName, tabBarTitle, focused, badge,
+    } = this.props;
     const color = focused ? theme.ThemeColor : theme.Colors.charcoal;
+    console.log('badge:', badge);
+    const hasBadge = !!badge;
     return (
       <View style={{ alignItems: 'center' }}>
         <Index
@@ -29,6 +34,15 @@ class TabButton extends Component<Props> {
         >
           {tabBarTitle}
         </Text>
+        {hasBadge
+          && (
+            <Badge
+              status="error"
+              value={`${badge}`}
+              containerStyle={{ position: 'absolute', top: -6, right: -10 }}
+            />
+          )
+        }
       </View>
     );
   }

src/components/TabOptions/index.js

@@ -8,20 +8,22 @@ import React from 'react';
 import TabButton from './TabButton';
 
 
-export function TabOptions(tabBarTitle : string, iconSuite : string, tabBarIconName : string) {
+export function TabOptions(
+  tabBarTitle : string,
+  iconSuite : string,
+  tabBarIconName : string,
+  badge: string,
+) {
   const title = tabBarTitle;
-  const tabBarIcon = ({ focused }: { focused : boolean }) => {
-    return (
-      <TabButton
-        iconSuite={iconSuite}
-        tabBarIconName={tabBarIconName}
-        tabBarTitle={tabBarTitle}
-        focused={focused}
-      />
-    );
-  };
+  const tabBarIcon = ({ focused }: { focused : boolean }) => (
+    <TabButton
+      iconSuite={iconSuite}
+      tabBarIconName={tabBarIconName}
+      tabBarTitle={tabBarTitle}
+      focused={focused}
+      badge={badge}
+    />
+  );
   const tabBarVisible = true;
   return { title, tabBarVisible, tabBarIcon };
 }
-
-

src/pages/avatarDemo/index.js

+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  View,
+  ScrollView,
+} from 'react-native';
+import { Avatar } from 'react-native-elements';
+import { push } from '../../BasicNavigator/actions';
+import NavigationBar from '../../components/NavigationBar';
+import BackButton from '../../components/BackButton';
+import Styles from '../../theme/Styles';
+
+type
+  Props = {
+  theme : Object,
+};
+
+function AvatarPage(props : Props) {
+  const { theme } = props;
+  return (
+    <View style={Styles.container}>
+      <NavigationBar
+        title="头像"
+        left={<BackButton />}
+      />
+      <ScrollView style={{ height: global.SCREEN_HEIGHT - 60 }}>
+        <View style={{
+          flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
+        }}
+        >
+          <View style={{ margin: 10 }}>
+            <Avatar
+              rounded
+              source={{
+                uri:
+                  'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
+              }}
+            />
+          </View>
+          <View style={{ margin: 10 }}>
+            <Avatar rounded title="MD" />
+          </View>
+          <View style={{ margin: 10 }}>
+            <Avatar rounded icon={{ name: 'home' }} />
+          </View>
+          <View style={{ margin: 10 }}>
+            <Avatar
+              source={{
+                uri:
+                  'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
+              }}
+              showEditButton
+            />
+          </View>
+        </View>
+        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+          <View style={{ margin: 10 }}>
+            <Avatar
+              size="small"
+              rounded
+              title="MT"
+              onPress={() => console.log('Works!')}
+              activeOpacity={0.7}
+            />
+          </View>
+          <View style={{ margin: 10 }}>
+            <Avatar
+              size="medium"
+              title="BP"
+              onPress={() => console.log('Works!')}
+              activeOpacity={0.7}
+            />
+          </View>
+          <View style={{ margin: 10 }}>
+            <Avatar
+              size="large"
+              title="LW"
+              onPress={() => console.log('Works!')}
+              activeOpacity={0.7}
+            />
+          </View>
+          <View style={{ margin: 10 }}>
+            <Avatar
+              size="xlarge"
+              rounded
+              title="CR"
+              onPress={() => console.log('Works!')}
+              activeOpacity={0.7}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+
+function actionMapping(dispatch) {
+  return {
+    pushTo: compose(dispatch, push),
+  };
+}
+
+function propsMapping({ theme }) {
+  return {
+    theme,
+  };
+}
+
+export default connect(propsMapping, actionMapping)(AvatarPage);

src/pages/badgeDemo/index.js

+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  View,
+  Text,
+  ScrollView,
+} from 'react-native';
+import { Avatar, Badge } from 'react-native-elements';
+import { push } from '../../BasicNavigator/actions';
+import NavigationBar from '../../components/NavigationBar';
+import BackButton from '../../components/BackButton';
+import Styles from '../../theme/Styles';
+
+type
+  Props = {
+  theme : Object,
+};
+
+function BadgePage(props : Props) {
+  return (
+    <View style={Styles.container}>
+      <NavigationBar
+        title="徽章"
+        left={<BackButton />}
+      />
+      <ScrollView>
+        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+          <View style={{ margin: 10 }}>
+            <Badge value="99+" status="error" />
+          </View>
+          <View style={{ margin: 10 }}>
+            <Badge value={<Text>My Custom Badge</Text>} />
+          </View>
+          <View style={{ margin: 10 }}>
+            <Badge status="success" />
+            <Text>success</Text>
+          </View>
+          <View style={{ margin: 10 }}>
+            <Badge status="error" />
+            <Text>error</Text>
+          </View>
+          <View style={{ margin: 10 }}>
+            <Badge status="primary" />
+            <Text>primary</Text>
+          </View>
+          <View style={{ margin: 10 }}>
+            <Badge status="warning" />
+            <Text>warning</Text>
+          </View>
+          <View>
+            <Avatar
+              rounded
+              source={{
+                uri: 'https://randomuser.me/api/portraits/men/41.jpg',
+              }}
+              size="large"
+            />
+            <Badge
+              status="error"
+              value="99+"
+              containerStyle={{ position: 'absolute', top: -4, right: -4 }}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+
+function actionMapping(dispatch) {
+  return {
+    pushTo: compose(dispatch, push),
+  };
+}
+
+function propsMapping({ theme }) {
+  return {
+    theme,
+  };
+}
+
+export default connect(propsMapping, actionMapping)(BadgePage);

src/pages/buttonDemo/index.js

@@ -29,7 +29,7 @@ function ButtonPage(props:Props) {
   return (
     <View style={Styles.container}>
       <NavigationBar
-        title="button"
+        title="按钮"
         left={<BackButton />}
       />
       <ScrollView>

src/pages/changeThemePage/index.js

@@ -46,7 +46,7 @@ class ThemePage extends Component<Props> {
       <View style={styles.container}>
         <NavigationBar
           left={<BackButton />}
-          title="ThemeDemo"
+          title="设置主题"
         />
         <Button
           containerStyle={{ height: 40, margin: 10 }}

src/pages/checkBoxDemo/index.js

+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  Image,
+  View,
+  ScrollView,
+} from 'react-native';
+import { CheckBox } from 'react-native-elements';
+import { push } from '../../BasicNavigator/actions';
+import NavigationBar from '../../components/NavigationBar';
+import BackButton from '../../components/BackButton';
+import Styles from '../../theme/Styles';
+
+type
+  Props = {
+  theme : Object,
+};
+
+function checkBoxPage(props : Props) {
+  const { theme } = props;
+  const [checked, setChecked] = useState(false);
+  const onClick = () => {
+    setChecked(!checked);
+  }
+  return (
+    <View style={Styles.container}>
+      <NavigationBar
+        title="选择框"
+        left={<BackButton />}
+      />
+      <ScrollView style={{ height: global.SCREEN_HEIGHT - 60 }}>
+        <View style={{
+          flex: 1, justifyContent: 'center', alignItems: 'center',
+        }}
+        >
+          <View style={{ margin: 10 }}>
+            <CheckBox
+              title="Click Here"
+              checked={checked}
+              onPress={onClick}
+            />
+          </View>
+          <View style={{ margin: 10 }}>
+            <CheckBox
+              center
+              title="Click Here"
+              checked={checked}
+              onPress={onClick}
+            />
+          </View>
+          <View style={{ margin: 10 }}>
+
+            <CheckBox
+              center
+              title="Click Here"
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={checked}
+              onPress={onClick}
+            />
+
+          </View>
+          <View style={{ margin: 10 }}>
+
+            <CheckBox
+              center
+              title="Click Here to Remove This Item"
+              iconRight
+              iconType="material"
+              checkedIcon="clear"
+              uncheckedIcon="add"
+              checkedColor="red"
+              checked={checked}
+              onPress={onClick}
+            />
+          </View>
+          <View style={{ margin: 10 }}>
+            <CheckBox
+              checkedIcon={<Image source={require('./checked.png')} />}
+              checkedColor={theme.ThemeColor}
+              uncheckedIcon={<Image source={require('./unchecked.png')} />}
+              uncheckedColor={theme.ThemeColor}
+              checked={checked}
+              onPress={onClick}
+            />
+          </View>
+          <View style={{ margin: 10 }}>
+            <CheckBox
+              checkedColor="red"
+              uncheckedColor="red"
+              checked={checked}
+              onPress={onClick}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+
+function actionMapping(dispatch) {
+  return {
+    pushTo: compose(dispatch, push),
+  };
+}
+
+function propsMapping({ theme }) {
+  return {
+    theme,
+  };
+}
+
+export default connect(propsMapping, actionMapping)(checkBoxPage);

src/pages/home/NativeComponentList.js

@@ -17,15 +17,21 @@ import {
 } from 'react-native';
 import { push } from '../../BasicNavigator/actions';
 import NavigationBar from '../../components/NavigationBar';
+import Styles from '../../theme/Styles';
 
 const data = [
   {
     items: [
-      { name: 'navigation跳转', page: 'JSPage' },
+      { name: '页面跳转', page: 'JSPage' },
       { name: '设置主题', page: 'ThemePage' },
       { name: '粘性头', page: 'SectionList' },
       { name: '瀑布流', page: 'WaterList' },
-      { name: 'button', page: 'ButtonPage' },
+      { name: '按钮', page: 'ButtonPage' },
+      { name: '头像', page: 'AvatarPage' },
+      { name: '徽章', page: 'BadgePage' },
+      { name: '选择框', page: 'CheckBoxPage' },
+      { name: '评分', page: 'RatingPage' },
+      { name: '拖吧', page: 'SliderPage' },
     ],
   },
 ];
@@ -41,14 +47,17 @@ class FramePage extends Component<Props> {
     const { theme, pushTo } = this.props;
     const item = data[section].items[row];
     return (
-      <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ alignItems: 'stretch', justifyContent: 'center' }}>
         <TouchableOpacity
           onPress={() => pushTo(item.page)}
         >
-          <Text style={theme.titleText}>
-            {item.name}
-          </Text>
+          <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+            <Text style={theme.titleText}>
+              {item.name}
+            </Text>
+          </View>
         </TouchableOpacity>
+        <View style={Styles.line} />
       </View>
     );
   };
@@ -88,5 +97,3 @@ function propsMapping({ theme }) {
 }
 
 export default connect(propsMapping, actionMapping)(FramePage);
-
-

src/pages/ratingDemo/index.js

+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  View,
+  ScrollView,
+} from 'react-native';
+import { AirbnbRating, Rating, Text } from 'react-native-elements';
+import { push } from '../../BasicNavigator/actions';
+import NavigationBar from '../../components/NavigationBar';
+import BackButton from '../../components/BackButton';
+import Styles from '../../theme/Styles';
+
+const WATER_IMAGE = require('./water.png');
+
+type
+  Props = {
+  theme: Object,
+};
+
+function RatingPage(props:Props) {
+  const { theme } = props;
+  const ratingCompleted = (rating) => {
+    console.log('Rating is: ', rating);
+  };
+  return (
+    <View style={Styles.container}>
+      <NavigationBar
+        title="评分"
+        left={<BackButton />}
+      />
+      <ScrollView>
+        <View style={{ alignItems: 'center' }}>
+          <Text style={{ margin: 20 }}>点击评分</Text>
+          <AirbnbRating
+            count={11}
+            reviews={['Terrible', 'Bad', 'Meh', 'OK', 'Good', 'Hmm...', 'Very Good', 'Wow', 'Amazing', 'Unbelievable', 'Jesus']}
+            defaultRating={11}
+            size={20}
+          />
+          <Text style={{ margin: 20 }}>拖拽评分</Text>
+          <Rating
+            showRating
+            onFinishRating={ratingCompleted}
+            style={{ paddingVertical: 10 }}
+          />
+          <Text style={{ margin: 20 }}>拖拽评分</Text>
+          <Rating
+            type="heart"
+            ratingCount={3}
+            imageSize={60}
+            showRating
+            onFinishRating={ratingCompleted}
+          />
+          <Text style={{ margin: 20 }}>拖拽评分</Text>
+          <Rating
+            type="custom"
+            ratingImage={WATER_IMAGE}
+            ratingColor="#3498db"
+            ratingBackgroundColor="#c8c7c8"
+            ratingCount={10}
+            imageSize={30}
+            onFinishRating={ratingCompleted}
+            style={{ paddingVertical: 10 }}
+          />
+
+          <Text style={{ margin: 20 }}>不能修改评分</Text>
+          <Rating
+            type="custom"
+            ratingImage={WATER_IMAGE}
+            ratingColor="#3498db"
+            ratingBackgroundColor="#c8c7c8"
+            ratingCount={10}
+            imageSize={30}
+            readonly
+            onFinishRating={ratingCompleted}
+            style={{ paddingVertical: 10 }}
+          />
+
+
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+
+function actionMapping(dispatch) {
+  return {
+    pushTo: compose(dispatch, push),
+  };
+}
+function propsMapping({ theme }) {
+  return {
+    theme,
+  };
+}
+
+export default connect(propsMapping, actionMapping)(RatingPage);

src/pages/sliderDemo/index.js

+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  View,
+  Text,
+  ScrollView,
+} from 'react-native';
+import { Slider } from 'react-native-elements';
+import { push } from '../../BasicNavigator/actions';
+import NavigationBar from '../../components/NavigationBar';
+import BackButton from '../../components/BackButton';
+import Styles from '../../theme/Styles';
+
+type
+  Props = {
+  theme : Object,
+};
+
+function SliderPage(props : Props) {
+  const { theme } = props;
+  const [value, setValue] = useState(0);
+  return (
+    <View style={Styles.container}>
+      <NavigationBar
+        title="拖拽"
+        left={<BackButton />}
+      />
+      <ScrollView style={{ height: global.SCREEN_HEIGHT - 60 }}>
+        <View style={{
+          flex: 1, alignItems: 'stretch', justifyContent: 'center',
+        }}
+        >
+          <Slider
+            value={value}
+            minimumTrackTintColor="blue"
+            onValueChange={num => setValue(num)}
+            onSlidingComplete={() => console.log('onSlidingComplete')}
+            onSlidingStart={() => console.log('onSlidingStart')}
+          />
+
+          <Slider
+            maximumTrackTintColor="green"
+            minimumTrackTintColor="blue"
+            thumbTouchSize={{
+              width: 80,
+              height: 80,
+            }}
+            value={value}
+            onValueChange={num => setValue(num)}
+          />
+          <Slider
+            thumbTintColor={theme.ThemeColor}
+            value={value}
+            onValueChange={num => setValue(num)}
+          />
+
+
+          <Slider
+            thumbTintColor={theme.ThemeColor}
+            value={value}
+            onValueChange={num => setValue(num)}
+          />
+          <Text>{`Value: ${value}`}</Text>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+
+function actionMapping(dispatch) {
+  return {
+    pushTo: compose(dispatch, push),
+  };
+}
+
+function propsMapping({ theme }) {
+  return {
+    theme,
+  };
+}
+
+export default connect(propsMapping, actionMapping)(SliderPage);

src/pages/waterListDemo/index.js

@@ -44,7 +44,7 @@ class WaterList extends Component<Props> {
     return (
       <View style={styles.container}>
         <NavigationBar
-          title="NativeComponentList"
+          title="瀑布流"
           left={<BackButton />}
         />
         <WaterfallList

src/theme/Styles.js

@@ -20,6 +20,7 @@ const Styles = {
    */
   container: {
     flex: 1,
+    flexDirection: 'column',
     //paddingTop: Metrics.baseMargin,
     backgroundColor: Colors.background,
   },