使用反應本地路由器通量VS nativebase

Question

我使用https://blog.nativebase.io/the-caveats-of-using-navigator-in-react-native-9547d99172ce#.cghvxk1mo

反應本地路由器通量的導航 但在使用它nativebase我讀。 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> 
 
    ) 
 
    } 
 
}

文件：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);

文件的組成部分我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。請給我一個例子！ 感謝您的幫助！

Answer 1

NativeBase與react-native-router-flux無關。所以這一定是簡單而直接的。

Native-Starter-Kit（NSK）以前實現的NativeBase與react-native-router-flux。 由於React Native的增強功能，NSK用React Native Navigator替換了react-native-router-flux。

此外，很快NSK將實施Navigator實驗。

Answer 2

找到https://github.com/vijaychouhan-rails/AllInOne/

最新的例子，我希望這會給你更好地瞭解如何使用NativeBase with react-native-router-flux