React-native 不显示故事书元素答案

【问题标题】：React-native doesn't show storybook elementsReact-native 不显示故事书元素
【发布时间】：2018-04-02 16:11:31
【问题描述】：

我打开新的 react-native v0.49 项目并使用命令安装故事书

npm i -g @storybook/cli

然后我打开我的项目并运行

获取故事书

我在我的项目中看到了故事书模块

    {
  "name": "materialApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "storybook": "storybook start -p 7007"
  },
  "dependencies": {
    "react": "16.0.0-beta.5",
    "react-native": "0.49.3"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.0.0-beta.5",
    "@storybook/react-native": "^3.2.13",
    "@storybook/addon-actions": "^3.2.13",
    "@storybook/addon-links": "^3.2.13",
    "react-dom": "16.0.0-beta.5",
    "prop-types": "^15.6.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

当我运行 npm run storybook 时，我看到了

然后我将服务器连接到 react-native 应用程序

adb 反向 tcp:7007 tcp:7007

我通过

运行 react-native 应用程序

react-native run-android

但我在服务器中看不到任何元素

【问题讨论】：

标签： react-native storybook

【解决方案1】：

故事需要自己添加，不是自动生成的。

这是来自故事书项目本身的示例，

https://github.com/storybooks/storybook/blob/master/examples/react-native-vanilla/storybook/stories/index.js

storiesOf('Button', module)
  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
  .add('with text', () => (
    <Button onPress={action('clicked-text')}>
      <Text>Hello Button</Text>
    </Button>
  ))
  .add('with some emoji', () => (
    <Button onPress={action('clicked-emoji')}>
      <Text>? ? ? ?</Text>
    </Button>
  ));

storiesOf('Knobs', module)
  .addDecorator(withKnobs)
  .add('with knobs', knobsWrapper);

【讨论】：