chore(SearchInputBar): Update README

cuilanxin · cuilanxin · commit 3b13e53c8425 · 2021-10-13T16:45:48.000+08:00
diff --git a/example/examples/src/routes/SearchInputBar/index.tsx b/example/examples/src/routes/SearchInputBar/index.tsx
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, TextInput} from 'react-native';
 import Layout, {Container} from '../../Layout';
 import {SearchInputBar, Toast} from '@uiw/react-native';
 import {ComProps} from '../../routes';
@@ -14,6 +14,7 @@ export interface IndexState {
 
 export default class Index extends Component<IndexProps, IndexState> {
   static state: IndexState;
+  ref = React.createRef<SearchInputBar>();
   constructor(props: IndexProps) {
     super(props);
     this.state = {
@@ -38,11 +39,13 @@ export default class Index extends Component<IndexProps, IndexState> {
           <Body>
             <View style={styles.divider} />
             <SearchInputBar
+              ref={this.ref}
               onChangeText={val => this.onChangeText(val, 'value')}
               onClear={() => this.onClear('value')}
               value={this.state.value}
               button={{
-                onPress() {
+                onPress: () => {
+                  console.log('object', this.ref);
                   Toast.info('你点击了搜索', 2, 'info');
                 },
               }}
diff --git a/packages/core/src/SearchInputBar/README.md b/packages/core/src/SearchInputBar/README.md
@@ -54,6 +54,38 @@ function Demo() {
 }
 ```
 
+## 获取输入框 Ref
+
+```jsx
+import { Fragment, useRef } from 'react';
+import { SearchInputBar } from '@uiw/react-native';
+function Demo() {
+  const inputRef = useRef()
+  return (
+    <Fragment>
+      <SearchInputBar
+        ref={inputRef}
+        onChangeText={setValue}
+        onClear={()=>setValue('')}
+        value={value}
+        placeholder="请输入搜索关键字"
+        actionName="搜一下"
+        showActionButton
+        button={{
+          onPress() {
+            // 点击搜索按钮触法
+          }
+        }}
+      />
+      <Button
+        onPress={()=>{
+          console.log(inputRef.current.inputRef)
+        }}
+      >获取 输入框 Ref</Button>
+    </Fragment>
+  );
+}
+```
 
 ## Props
 
diff --git a/packages/core/src/SearchInputBar/RightButton.tsx b/packages/core/src/SearchInputBar/RightButton.tsx
@@ -23,7 +23,7 @@ export default class RightButton extends React.PureComponent<RightButtonProps, R
     const { isShow = false, actionName = '搜索', width, ...other } = this.props;
     return (
       <View style={[styles.rightStyle, { width: width - 10, opacity: Number(isShow) }]}>
-        <Button type="primary" {...other} style={{ flex: 1, paddingHorizontal: 10 }}>
+        <Button type="primary" {...other} style={[{ flex: 1, paddingHorizontal: 10 }, other.textStyle]}>
           {actionName}
         </Button>
       </View>
