关于

App & Flow 是一家位于蒙特利尔的 React Native 工程与咨询工作室。我们与全球顶尖企业开展合作，并受到 Expo 的推荐。需要帮助吗？让我们携手构建。 team@appandflow.com

为什么选择 react-native-magic-scroll？

该库的目标是在与表单交互时，无缝且精确地处理您的键盘、滚动视图和输入框。虽然其他解决方案提供了即插即用的功能，但我们希望拥有更精确且更具灵活性的方案，以便在任何情况下都能使用。

示例

我们重现了两个来自热门应用的流程，以展示我们库的实际效果。 演示应用代码可在此处获取。

Twitch 的注册	Shop 的结账

安装

react-native-magic-scroll

yarn add @appandflow/react-native-magic-scroll

npm i @appandflow/react-native-magic-scroll

依赖项

要使用我们的库，你需要将以下两个依赖项安装到你的项目中。

1) React Native Reanimated

npx expo install react-native-reanimated

了解更多关于此依赖项的信息，请参见此处。

2) SafeAreaContext

npx expo install react-native-safe-area-context

在此处](https://docs.expo.dev/versions/latest/sdk/safe-area-context/)了解有关此依赖项的更多信息。

Android

在 Android 上，请确保在 AndroidManifest.xml 中将 android:windowSoftInputMode 设置为 pan

Expo

// app.json
"android": {
  ...rest,
  "softwareKeyboardLayoutMode": "pan"
}

基本用法

将您的屏幕包裹在我们的 ScrollView 中。

import { MagicScroll } from '@appandflow/react-native-magic-scroll';
// rest of your imports

const YourScreen = () => {
  return <MagicScroll.ScrollView>// Your form</MagicScroll.ScrollView>;
};

export default YourScreen;

然后，您使用我们的 TextInputs 作为表单本身，将其放置在 MagicScroll.ScrollView 内部。通过使用 MagicScroll.TextInput 的 name 和 chainTo 属性，轻松“链接”您的输入框（这样回车键盘按钮会跳转到下一个期望的输入框），如下所示：

import { MagicScroll } from '@appandflow/react-native-magic-scroll';
// rest of your imports

const textInputStyle = {
  height: 50,
  backgroundColor: '#ddd',
  borderRadius: 10,
  marginTop: 8,
};

const YourScreen = () => {
  return (
    <MagicScroll.ScrollView>
      <MagicScroll.TextInput
        // This is the name of this text input, used by the `chainTo` prop
        name="email"
        // This is where you can design your a custom label above the input
        renderTop={() => <Text>Email</Text>}
        // This is where you can design your custom label below the input
        renderBottom={() => <Text>Must be unique</Text>}
        // This is the function that will make the text input named "password" focused when pressing the Enter or Return key on the device's keyboard
        chainTo="password"
        textInputProps={{
          style: textInputStyle,
        }}
      />
      <MagicScroll.TextInput
        name="password"
        renderTop={() => <Text>Password</Text>}
        textInputProps={{
          secureTextEntry: true,
          style: textInputStyle,
        }}
      />
    </MagicScroll.ScrollView>
  );
};

你也可以使用 renderInput 函数并使用任何类型的输入

import { MagicScroll } from '@appandflow/react-native-magic-scroll';
// rest of your imports

const textInputStyle = {
  height: 50,
  backgroundColor: '#ddd',
  borderRadius: 10,
  marginTop: 8,
};

const YourAwesomeInput = ({
  label,
  ...props
}: TextInputProps & { label: string }) => {
  return (
    <View>
      <Text>{label}</Text>
      <TextInput {...props} />
    </View>
  );
};

const YourScreen = () => {
  return (
    <MagicScroll.ScrollView>
      <MagicScroll.TextInput
        // This is the name of this text input, used by the `chainTo` prop
        name="email"
        // This is where you can pass your input. You need to spread the prop object. Make sure it is the last prop
        renderInput={(magicProps) => (
          <YourAwesomeInput label="Email" {...magicProps} />
        )}
        // This is the function that will make the text input named "password" focused when pressing the Enter or Return key on the device's keyboard
        chainTo="password"
        textInputProps={{
          style: textInputStyle,
        }}
      />
      <MagicScroll.TextInput
        name="password"
        renderTop={() => <Text>Password</Text>}
        textInputProps={{
          secureTextEntry: true,
          style: textInputStyle,
        }}
      />
    </MagicScroll.ScrollView>
  );
};

高级

如引言中所述，即插即用库的缺点在于偏离标准功能时的局限性。正因如此，我们的库允许进行自定义，使您能够根据具体需求和用例调整其使用方式。

提示

将我们的 MagicScroll.TextInput 封装在您自己的组件中以实现复用，这是一个很好的主意！

以下是一个示例

import { MagicScroll } from '@appandflow/react-native-magic-scroll';

// rest of your imports

interface Props {
  label?: string;
  isPassword?: boolean;
  name?: string;
  description?: string;
  chainTo?: string;
}

const YourCustomInput = (props: Props) => {
  return (
    <MagicScroll.TextInput
      name={props.name}
      chainTo={props.chainTo}
      renderTop={() => <Text>{props.label}</Text>}
      renderBottom={() => <Text>{props.description}</Text>}
      textInputProps={{
        secureTextEntry: props.isPassword,
        style: {
          height: 50,
          backgroundColor: '#ddd',
          borderRadius: 10,
          marginTop: 8,
        },
      }}
    />
  );
};

Props（可选）

所有这些 props 都是可选的。不过，建议使用它们以充分利用该库。

MagicScroll.ScrollView

Name	Description	Values
additionalPadding	在文本输入框和键盘之间添加额外的内边距	number
scrollViewProps	包含来自 React Reanimated 库的 scrollview 的所有 props	props

MagicScroll.TextInput

Name	Description	Values
chainTo	包含按下 "Enter Key" 时将获得焦点的下一个文本输入框名称的字符串	string
containerStyle	包含来自 React Native 的 View 的所有 Style props	props
name	用于命名当前文本输入框的字符串，用于上述 "chainTo" props 中	string
renderBottom()	一个用于渲染组件以在文本输入框下方显示自定义文本的函数	renderBottom={() => <Text>bottomText</Text>}
renderTop()	一个用于渲染组件以在文本输入框上方显示自定义文本的函数	renderTop={() => <Text>topText</Text>}
textInputProps	包含来自 React Native 的 TextInput 组件的所有 props	props