feat(ActionBar):新增ActionBar

Author: ChenlingasMx

example/examples/src/routes.tsx

@@ -490,4 +490,12 @@ export const stackPageData: Routes[] = [
       description: '可输入多行文字',
     },
   },
+  {
+    name: 'ActionBar',
+    component: require('./routes/ActionBar').default,
+    params: {
+      title: 'ActionBar 底部操作栏',
+      description: '底部操作栏',
+    },
+  },
 ];

example/examples/src/routes/ActionBar/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {ActionBar} from '@uiw/react-native';
+import {View, Alert} from 'react-native';
+import {ComProps} from '../../routes';
+import Layout from '../../Layout';
+const {Header} = Layout;
+
+export interface ActionBarProps extends ComProps {}
+
+export default class ActionBarDemo extends React.Component<ActionBarProps> {
+  render() {
+    const {route} = this.props;
+    const description = route.params.description;
+    const title = route.params.title;
+    return (
+      <React.Fragment>
+        <Header title={title} description={description} />
+        <View style={{flex: 1}}>
+          <ActionBar
+            backgroundColor="#5847FF"
+            scroll={false}
+            actions={[
+              {
+                label: 'Delete',
+                onPress: () => Alert.alert('delete'),
+                fontStyle: {fontWeight: 'bold', color: '#fff'},
+              },
+              {
+                label: 'Replace',
+                onPress: () => Alert.alert('replace photo'),
+                fontStyle: {fontWeight: 'bold', color: '#fff'},
+              },
+              {
+                label: 'Edit',
+                onPress: () => Alert.alert('edit'),
+                fontStyle: {fontWeight: 'bold', color: '#fff'},
+              },
+            ]}
+          />
+        </View>
+      </React.Fragment>
+    );
+  }
+}

packages/core/src/ActionBar/README.md

@@ -0,0 +1,57 @@
+ActionBar 底部操作栏
+---
+
+底部操作栏
+
+
+
+### 基础示例
+
+```jsx
+import React from 'react';
+import { ActionBar } from '@uiw/react-native';
+import { View, Alert } from 'react-native'
+
+export interface ScreenRootProps extends ComProps { }
+
+export default class Demo extends React.Component<ScreenRootProps> {
+  render() {
+    return (
+    <View style={{ flex: 1 }}>
+        <ActionBar
+          scroll={false}
+          actions={[
+            { label: 'Delete', onPress: () => Alert.alert('delete'), fontStyle: { fontWeight: 'bold', color: "#5847FF" } },
+            { label: 'Replace', onPress: () => Alert.alert('replace photo'), fontStyle: { fontWeight: 'bold', color: "#5847FF" }  },
+            { label: 'Edit', onPress: () => Alert.alert('edit'), fontStyle: { fontWeight: 'bold', color: "#5847FF" }  }
+          ]}
+        />
+    </View>
+    );
+  }
+}
+```
+
+### Props
+```tsx
+export type ActionBarProps = {
+  // 高度
+  height?: number;
+  // 背景色
+  backgroundColor?: string;
+  // 按钮
+  actions: Array<{
+    label?: string;
+    onPress?: () => void;
+    fontStyle?: TextStyle;
+    render?: ReactNode
+  }>;
+  // 是否在底部
+  keepAbsoulte?: boolean;
+  // 在 iOS 中，使用安全区域，以防组件附加到底部
+  useSafeArea?: boolean;
+  style?: ViewStyle;
+  // 是否横向滚动
+  scroll?: boolean
+};
+```

packages/core/src/ActionBar/index.tsx

@@ -0,0 +1,101 @@
+import _ from 'lodash';
+import React, { ReactNode, useMemo } from 'react';
+import {
+  StyleSheet,
+  ViewStyle,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  Text,
+  TextStyle,
+  SafeAreaView,
+  Platform,
+} from 'react-native';
+
+export type ActionBarProps = {
+  height?: number;
+  backgroundColor?: string;
+  actions: Array<{
+    label?: string;
+    onPress?: () => void;
+    fontStyle?: TextStyle;
+    render?: ReactNode;
+  }>;
+  keepAbsoulte?: boolean;
+  style?: ViewStyle;
+  scroll?: boolean;
+  useSafeArea?: boolean;
+};
+
+const Container = (props: { scroll: boolean; children: ReactNode; useSafeArea: boolean; style: any }) => {
+  const { scroll, children, useSafeArea, ...others } = props;
+  const renderDom = useMemo(() => {
+    if (scroll) {
+      return (
+        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} {...others}>
+          {children}
+        </ScrollView>
+      );
+    }
+    if (!scroll && useSafeArea && Platform.OS === 'ios') {
+      return <SafeAreaView {...others}>{children}</SafeAreaView>;
+    }
+    return <View {...others}>{children}</View>;
+  }, [scroll, useSafeArea, children]);
+  return renderDom;
+};
+
+function ActionBar(props: ActionBarProps) {
+  const {
+    actions,
+    style,
+    keepAbsoulte = true,
+    height = 48,
+    backgroundColor = '#fff',
+    scroll = true,
+    useSafeArea = true,
+  } = props;
+
+  const styles = createStyles({ height: height, backgroundColor: backgroundColor });
+
+  // 按钮长度
+  const actionLeg = actions.length || 0;
+
+  // 是否是数组最后一个
+  const last = (i: number) => actionLeg - 1 === i;
+
+  return (
+    <Container scroll={scroll} useSafeArea={useSafeArea} style={[keepAbsoulte && styles.absoluteContainer]}>
+      <View style={[styles.container, { justifyContent: 'space-between', ...style }]}>
+        {_.map(actions, ({ label = '', onPress, render, fontStyle }, i) => {
+          return (
+            <TouchableOpacity key={i} onPress={onPress && onPress} style={{ marginRight: scroll && !last(i) ? 20 : 0 }}>
+              {render ? render : <Text style={{ ...fontStyle }}>{label}</Text>}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </Container>
+  );
+}
+
+function createStyles({ height, backgroundColor }: any) {
+  return StyleSheet.create({
+    container: {
+      height,
+      paddingHorizontal: 20,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    absoluteContainer: {
+      ...StyleSheet.absoluteFillObject,
+      top: undefined,
+      backgroundColor,
+      shadowColor: '#43515C',
+      shadowOpacity: 0.06,
+      shadowRadius: 18.5,
+    },
+  });
+}
+
+export default ActionBar;

packages/core/src/index.tsx

@@ -116,6 +116,8 @@ export { default as TreeSelect } from './TreeSelect';
 export * from './TreeSelect';
 export { default as TextArea } from './TextArea';
 export * from './TextArea';
+export { default as ActionBar } from './ActionBar';
+export * from './ActionBar';
 /**
  * Typography
  */