У меня возникли проблемы с интеграцией Storybook с React-native-cli. Сначала я следовал этому руководству, но также попробовал следующие решения:
но в моем случае они не работают
Учебники, которые я пробовал, привели мой код в следующее состояние
// package.json
{
"name": "xyz",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"apk": "cd android; ./gradlew assembleRelease",
"clean": "cd android && .\\gradlew clean",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"storybook-generate": "sb-rn-get-stories",
"storybook": "cross-env STORYBOOK_ENABLED=true react-native start",
"storybook:ios": "cross-env STORYBOOK_ENABLED=true react-native run-ios",
"storybook:android": "cross-env STORYBOOK_ENABLED=true react-native run-android"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.17.11",
"@react-navigation/drawer": "^6.5.7",
"@react-navigation/native": "^6.1.1",
"@react-navigation/native-stack": "^6.9.7",
"@reduxjs/toolkit": "^1.9.1",
"@rneui/base": "^4.0.0-rc.7",
"@rneui/themed": "^4.0.0-rc.7",
"@shopify/restyle": "^2.4.4",
"date-fns": "^2.29.3",
"lodash.isempty": "^4.4.0",
"numeral": "^2.0.6",
"papaparse": "^5.4.1",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-document-picker": "^8.1.3",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.9.0",
"react-native-reanimated": "^2.14.4",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-native-vector-icons": "^9.2.0",
"react-redux": "^8.0.5",
"redux": "^4.2.0",
"redux-persist": "^6.0.0",
"styled-components": "^5.3.6"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/datetimepicker": "8.0.1",
"@react-native-community/eslint-config": "^2.0.0",
"@react-native-community/slider": "4.5.2",
"@storybook/addon-ondevice-actions": "7.6.19",
"@storybook/addon-ondevice-controls": "7.6.19",
"@storybook/react-native": "7.6.19",
"babel-jest": "^26.6.3",
"babel-loader": "8.3.0",
"cross-env": "^7.0.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "0.72.3",
"prop-types": "^15.8.1",
"react-dom": "18.1.0",
"react-test-renderer": "18.1.0"
},
"jest": {
"preset": "react-native"
}
}
// index.js
import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './src/app';
let app = App;
if (__DEV__ && process.env.STORYBOOK_ENABLED === 'true') {
const StorybookUIRoot = require('./storybook').default;
app = StorybookUIRoot;
}
AppRegistry.registerComponent(appName, () => app);
// metro.config.js
module.exports = {
transformer: {
unstable_allowRequireContext: true,
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
Я просто хочу интегрировать Storybook в свой реактивный проект. Большинство решений, которые я нашел, включали expo, но мне это не нужно.
Может ли кто-нибудь указать мне правильное направление или, если возможно, выделить мои ошибки в коде.
Запуск определенных сценариев приводит к FAILURE: Build failed with an exception.
Вот сообщение об ошибке, которое я получаю:
$ yarn storybook:android
yarn run v1.22.19
$ cross-env STORYBOOK_ENABLED=true react-native run-android
info JS server already running.
info Installing the app...
FAILURE: Build failed with an exception.
* Where:
Script 'E:\*\*\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 450
* What went wrong:
A problem occurred evaluating script.
> Calling `[node, E:\*\*\node_modules\@react-native-community\cli\build\bin.js, config]` finished with an exception. Error message: groovy.json.JsonException: Unable to determine the current character, it is not a string, number, array, or object
The current character read is 'i' with an int value of 105
Unable to determine the current character, it is not a string, number, array, or object
line number 1
index number 0
info Run CLI with --verbose flag for more details.
^. Output: info Run CLI with --verbose flag for more details.
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 27s
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* Where:
Script 'E:\*\*\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 450
* What went wrong:
A problem occurred evaluating script.
> Calling `[node, E:\*\*\node_modules\@react-native-community\cli\build\bin.js, config]` finished with an exception. Error message: groovy.json.JsonException: Unable to determine the current character, it is not a string, number, array, or object
The current character read is 'i' with an int value of 105
Unable to determine the current character, it is not a string, number, array, or object
line number 1
index number 0
info Run CLI with --verbose flag for more details.
^. Output: info Run CLI with --verbose flag for more details.
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 27s
🤔 А знаете ли вы, что...
React поддерживает однонаправленный поток данных (unidirectional data flow) для предсказуемого управления состоянием.