feat(ActionBar):add focusIndex api && add 增加首项末项阴影 && add scroll状态下跳转功能

Author: ChenlingasMx

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {ActionBar} from '@uiw/react-native';
+import {ActionBar, Button, Icon} from '@uiw/react-native';
 import {View, Alert} from 'react-native';
 import {ComProps} from '../../routes';
 import Layout from '../../Layout';
@@ -17,8 +17,8 @@ export default class ActionBarDemo extends React.Component<ActionBarProps> {
         <Header title={title} description={description} />
         <View style={{flex: 1}}>
           <ActionBar
-            backgroundColor="#5847FF"
             scroll={false}
+            backgroundColor="#5847FF"
             actions={[
               {
                 label: 'Delete',

packages/core/src/ActionBar/README.md

@@ -1,7 +1,7 @@
 ActionBar 底部操作栏
 ---
 
-底部操作栏
+底部操作栏(可滚动)
 
 
 
@@ -19,7 +19,6 @@ export default class Demo extends React.Component<ScreenRootProps> {
     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" }  },
@@ -32,6 +31,85 @@ export default class Demo extends React.Component<ScreenRootProps> {
 }
 ```
 
+### 可航向滚动示例
+
+```jsx
+import React from 'react';
+import { ActionBar } from '@uiw/react-native';
+import { View } from 'react-native'
+
+export interface ScreenRootProps extends ComProps { }
+
+export default class Demo extends React.Component<ScreenRootProps> {
+  state = {
+    selectedIndex: 0
+  }
+  focus = (index: number) => this.setState({ selectedIndex: index });
+  render() {
+    return (
+    <View style={{ flex: 1 }}>
+        <ActionBar
+          scroll={true}
+          focusIndex={this.state.selectedIndex}
+          actions={[
+              {
+                label: 'Delete',
+                onPress: () => this.focus(0),
+                fontStyle: { fontWeight: 'bold', color: '#fff' },
+              },
+              {
+                label: 'Replace',
+                onPress: () => this.focus(1),
+                fontStyle: { fontWeight: 'bold', color: '#fff' },
+              },
+              {
+                label: 'Edit',
+                onPress: () => this.focus(2),
+                fontStyle: { fontWeight: 'bold', color: '#fff' },
+              },
+              {
+                label: 'Delete',
+                onPress: () => this.focus(3),
+                fontStyle: { fontWeight: 'bold', color: '#fff' },
+              },
+              {
+                label: 'Replace',
+                onPress: () => this.focus(4),
+                fontStyle: { fontWeight: 'bold', color: '#fff' },
+              },
+              {
+                label: 'ADD',
+                onPress: () => this.focus(5),
+                fontStyle: { fontWeight: 'bold', color: '#fff' },
+              },
+              {
+                label: 'CSS',
+                onPress: () => this.focus(6),
+                fontStyle: { fontWeight: 'bold', color: '#fff' },
+              },
+              {
+                label: 'React',
+                onPress: () => this.focus(7),
+                fontStyle: { fontWeight: 'bold', color: '#fff' },
+              },
+              {
+                label: 'Vue',
+                onPress: () => this.focus(8),
+                fontStyle: { fontWeight: 'bold', color: '#fff' },
+              },
+              {
+                label: 'PHP',
+                onPress: () => this.focus(9),
+                fontStyle: { fontWeight: 'bold', color: '#fff' },
+              },
+            ]}
+        />
+    </View>
+    );
+  }
+}
+```
+
 ### Props
 ```tsx
 export type ActionBarProps = {
@@ -40,7 +118,7 @@ export type ActionBarProps = {
   // 背景色
   backgroundColor?: string;
   // 按钮
-  actions: Array<{
+  actions?: Array<{
     label?: string;
     onPress?: () => void;
     fontStyle?: TextStyle;
@@ -53,5 +131,7 @@ export type ActionBarProps = {
   style?: ViewStyle;
   // 是否横向滚动
   scroll?: boolean
+  // scroll横行滚动时,item跳转下标
+  focusIndex?: number
 };
 ```