Detalhes do pacote

这个插件出现的原因：

• 使用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文件，加入此插件配置

      module.exports = {
        presets: ['module:metro-react-native-babel-preset'],
        plugins: [['import', {libraryName: '@ant-design/react-native'}]],
        env: {
          production: {
            plugins: ['react-native-paper/babel'],
          },
          development: {
            plugins: ['babel-plugin-react-native-style-rewrite'],
          },
        },
      };
   

这个插件的效果

转换前：

    const AppAll = () => {
    const [dialogShow, setDialogShow] = useState(false);
    const [loading, setLoading] = useState(true);
    return (
      <Provider store={store}>
        {loading ? (
          <>
            <Image
              style={{
                width: DEVICE_WIDTH,
                height: DEVICE_REAL_HEIGHT,
              }}
              resizeMode="stretch"
              source={require('./launch_screen.png')}
            />
            <PrivacyDialog
              dialogShow={dialogShow}
              onAgreePress={() => {
                setDialogShow(false);
                setLoading(false);
              }}
            />
          </>
        ) : (
          <App />
        )}
      </Provider>
    );
  };

  AppRegistry.registerComponent(appName, () => AppAll);

转换后：

    const AppAll = () => {
    // 隐私政策弹窗是否显示
    const [dialogShow, setDialogShow] = useState(false); // 第一次打开app的加载状态

    const [loading, setLoading] = useState(true);
    return <Provider store={store}>
        {loading ? <>
            <Image style={styless514055.s367479} resizeMode="stretch" source={require('./launch_screen.png')} />
            <PrivacyDialog dialogShow={dialogShow} onAgreePress={() => {
          setDialogShow(false);
          setLoading(false);
        }} />
          </> : <App />}
      </Provider>;
  };

  AppRegistry.registerComponent(appName, () => AppAll);
  var styless514055 = StyleSheet.create({
    s367479: {
      width: DEVICE_WIDTH,
      height: DEVICE_REAL_HEIGHT
    }
  });