我读了
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,TouchableHighlight } from 'react-native'; import { Container,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,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实验.