使用react-native-router-flux vs nativebase

Question

我讀了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。 請舉個例子！ 謝謝你的幫助！

Answer 1

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實驗。

Answer 2

在https://github.com/vijaychouhan-rails/AllInOne/找到最新的例子

我希望這能讓你更好地理解如何將NativeBase with react-native-router-flux