如何将 reactstrap 组件与 React 本机应用程序一起使用?
How do I use the reactstrap components with a react native app?
我正在尝试将 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
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/
我正在尝试将 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
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/