如何将 reactstrap 组件与 react native 应用程序一起使用？答案

【问题标题】：How do I use the reactstrap components with a react native app?如何将 reactstrap 组件与 react native 应用程序一起使用？
【发布时间】：2018-06-24 16:54:54
【问题描述】：

我正在尝试将 reactstrap 与 react native 一起使用，但在运行演示时不断出现错误：

Invariant Violation: View config not found for name a

This error is located at:
    in a (created by NavbarBrand)
    in NavbarBrand (at App.js:58)
    in nav (created by Navbar)
    in Navbar (at App.js:57)
    in div (at App.js:56)
    in App (created by AwakeInDevApp)
    in RCTView (at View.js:113)
    in View (created by AwakeInDevApp)
    in AwakeInDevApp (at registerRootComponent.js:34)
    in RootErrorBoundary (at registerRootComponent.js:33)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)

我运行的代码是：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem } from 'reactstrap';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
    return (
      <div>
        <Navbar color="faded" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu >
                  <DropdownItem>
                    Option 1
                  </DropdownItem>
                  <DropdownItem>
                    Option 2
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Reset
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我的安装如下：

npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject

npm install --save bootstrap@4.0.0-beta.3
npm install --save reactstrap@next react-dom@^16.0.0
npm install --save jquery@1.9.1

我正在使用：节点 v7.10.1 npm 4.2.0

【问题讨论】：

标签： react-native reactstrap

【解决方案1】：

Reactstrap 不能用于 react native，因为它是针对 html 的。对于可重用组件，您可能需要查看 ~~https://github.com/react-native-training/react-native-elements~~。

编辑：

此之前的存储库已由所有者存档。它现在是只读的。

这是新的仓库：https://github.com/react-native-elements/react-native-elements

如果您在访问文档时遇到任何问题，请注意它们可通过新 URL 获得：https://react-native-elements.github.io/react-native-elements/

【讨论】：