javascript – 使用react-native-router-flux vs nativebase
作者:互联网
我读了https://blog.nativebase.io/the-caveats-of-using-navigator-in-react-native-9547d99172ce#.cghvxk1mo
使用react-native-router-flux导航器
但是当我将它与nativebase一起使用时. nativebase的组件不活动
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import { AppRegistry,Text,View,Navigator } from 'react-native';
import { Container,Header,Content,Title,Badge,Tabs,Button,Icon} from 'native-base';
import { Router, Scene } from 'react-native-router-flux';
import Home from './component/Home';
import MyScene from './component/MyScene';
class CookApp extends Component {
//State la bien dung de luu giu trang thai. Con props la bien dung de trung chuyen du lieu, ham giua cac component
//dat ten class phai viet hoa dau, ten file phai trung file class
render() {
return (
<Router hideTabBar={true}>
<Scene key="PageOne" component={Home} title="Home" initial={true} />
<Scene key="pageTwo" component={MyScene} title="MyScene" />
</Router>
);
}
}
AppRegistry.registerComponent('CookApp', () => CookApp);
档案:Home.js
import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';
import { Container,Header,Content,Title,Badge,Tabs,Button,Icon,Input} from 'native-base';
import { Actions } from 'react-native-router-flux';
export default class Home extends Component {
render() {
const goToPageTwo = () => Actions.pageTwo({text: 'Hello World!'});
return (
<Header>
<Button>
<Icon name='ios-arrow-back' />
</Button>
<Title>CookApp</Title>
<Button>
<Icon name='ios-menu' />
</Button>
</Header>
<Container>
<Content>
<Button transparent onPress={Actions.pageTwo}>
go to pageTwo
</Button>
<View style={{margin: 128}}>
<Text onPress={goToPageTwo}>This is PageOne!</Text>
</View>
</Content>
</Container>
)
}
}
文件:我的scene.js
import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';
import { Container,Header,Content,Title,Badge,Tabs,Button,Icon} from 'native-base';
import { Actions } from 'react-native-router-flux';
export default class MyScene extends Component {
// static propTypes = {
// title: PropTypes.string.isRequired,
// onForward: PropTypes.func.isRequired,
// onBack: PropTypes.func.isRequired,
// }
render() {
return (
// <Container>
// <Header>
// <Button transparent onPress={this.props.onBack}>
// <Icon name='ios-arrow-back' />
// </Button>
// <Title> { this.props.title }</Title>
// <Button transparent onPress={this.props.onForward}>
// <Icon name='ios-menu' />
// </Button>
// </Header>
//
// <Content>
// <Button transparent onPress = {this.deleteText}>
// <Icon name='ios-home' />
// </Button>
// </Content>
// </Container>
<View style={{margin: 128}}>
<Text>This is PageTwo!</Text>
<Text>{this.props.text}</Text>
</View>
)
}
}
运行应用程序时. nativeBase的组件未激活.
任何人都使用nativeBase和react-native-router-flux.请举个例子!
谢谢你的帮助!
解决方法:
NativeBase与react-native-router-flux无关.所以这必须简单明了.
Native-Starter-Kit(NSK)之前使用react-native-router-flux实现了NativeBase.
由于增强了React Native的功能,NSK用React Native Navigator取代了react-native-router-flux.
此外,很快NSK将实施Navigator实验.
标签:javascript,react-native,native-base,react-native-router-flux 来源: https://codeday.me/bug/20190706/1393693.html