这个插件出现的原因：

• 使用StyleSheet可以提高性能： 因为StyleSheet.create()创建的样式可以通过ID重复引用，而内联样式则每次都需要创建一个新的对象。 因为StyleSheet允许仅通过bridge发送一次样式。 所有后续使用都将引用一个ID（尚未实现）。
• 直接写一个js对象作为样式更方便直观一点
• 经过babel处理后自动将js对象形式的样式转换为StyleSheet.create()后的样式

使用方法

1. 安装 yarn add babel-plugin-react-native-style-rewrite 或 npm install babel-plugin-react-native-style-rewrite
2. 使用 找到babel的config文件，加入此插件配置

   1   module.exports = {
   2     presets: ['module:metro-react-native-babel-preset'],
   3     plugins: [['import', {libraryName: '@ant-design/react-native'}]],
   4     env: {
   5       production: {
   6         plugins: ['react-native-paper/babel'],
   7       },
   8       development: {
   9         plugins: ['babel-plugin-react-native-style-rewrite'],
   10       },
   11     },
   12   };
   13

这个插件的效果

转换前：

1  const AppAll = () => {
2  const [dialogShow, setDialogShow] = useState(false);
3  const [loading, setLoading] = useState(true);
4  return (
5    <Provider store={store}>
6      {loading ? (
7        <>
8          <Image
9            style={{
10              width: DEVICE_WIDTH,
11              height: DEVICE_REAL_HEIGHT,
12            }}
13            resizeMode="stretch"
14            source={require('./launch_screen.png')}
15          />
16          <PrivacyDialog
17            dialogShow={dialogShow}
18            onAgreePress={() => {
19              setDialogShow(false);
20              setLoading(false);
21            }}
22          />
23        </>
24      ) : (
25        <App />
26      )}
27    </Provider>
28  );
29};
30
31AppRegistry.registerComponent(appName, () => AppAll);

转换后：

1  const AppAll = () => {
2  // 隐私政策弹窗是否显示
3  const [dialogShow, setDialogShow] = useState(false); // 第一次打开app的加载状态
4
5  const [loading, setLoading] = useState(true);
6  return <Provider store={store}>
7      {loading ? <>
8          <Image style={styless514055.s367479} resizeMode="stretch" source={require('./launch_screen.png')} />
9          <PrivacyDialog dialogShow={dialogShow} onAgreePress={() => {
10        setDialogShow(false);
11        setLoading(false);
12      }} />
13        </> : <App />}
14    </Provider>;
15};
16
17AppRegistry.registerComponent(appName, () => AppAll);
18var styless514055 = StyleSheet.create({
19  s367479: {
20    width: DEVICE_WIDTH,
21    height: DEVICE_REAL_HEIGHT
22  }
23});