Question

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity,
  Image,
  Button
} from 'react-native';
import Actions from 'react-native-router-flux';


import First from './First';

export default class Home extends Component{
      componentWillMount() {

    }


render(){
    return(
        <View>
        <View style={{height:220,backgroundColor:'#DCDCDC'}}>
            <Image style={{width:120,height:120,top:50,left:120,backgroundColor:'red'}} 
        source={require('./download.png')} />
        </View>
         <View style={{top:30}}>
         <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <TouchableOpacity style= { styles.views}  
          onPress = {()=>{ Actions.First({customData: 'Hello!'}) }}>
          <Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Profile </Text>
          </TouchableOpacity>

           <TouchableOpacity style= { styles.views1} >
          <Text style={{fontSize:20, textAlign:'center',color:'white',top:20}}> Health Tracker </Text>
          </TouchableOpacity>
          </View>



         </View>


        </View>
        );
}
}

在上面的代码中，不工作的操作意味着没有导航到First.js页面，如何编辑我的代码，我还没有在ComponentWillMount（）函数中写任何东西，我应该在里面写什么？{{3 }}

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity
} from 'react-native';

import Home from './Home';

export default class Prof extends Component{

     constructor(){
      super()
   }

    render(){
        return (

             <Navigator
               initialRoute = {{ name: 'Home', title: 'Home' }}
               renderScene = { this.renderScene }
               navigationBar = {
               <Navigator.NavigationBar
                  style = { styles.navigationBar }
                  routeMapper = { NavigationBarRouteMapper } />
            }
         />

            );
    }

 renderScene(route, navigator) {
      if(route.name == 'Home') {
         return (
            <Home
               navigator = {navigator}
               {...route.passProps} 
            />
         )
      }
  }
}


var NavigationBarRouteMapper = {
   LeftButton(route, navigator, index, navState) {
      if(index > 0) {
         return (
         <View>
            <TouchableOpacity
               onPress = {() => { if (index > 0) { navigator.pop() } }}>
               <Text style={ styles.leftButton }>
                  Back
               </Text>
            </TouchableOpacity>
            </View>
         )
      }
      else { return null }
   },
   RightButton(route, navigator, index, navState) {
      if (route.openMenu) return (
         <TouchableOpacity
            onPress = { () => route.openMenu() }>
            <Text style = { styles.rightButton }>
               { route.rightText || 'Menu' }
            </Text>
         </TouchableOpacity>
      )
   },
   Title(route, navigator, index, navState) {
      return (
         <Text style = { styles.title }>
            {route.title}
         </Text>
      )
   }
};

Answer 1

首先，我建议您创建一个rounter组件并从那里启动应用程序：像这样的东西

import { Scene, Router, ActionConst } from 'react-native-router-flux';
import First from 'yourRoute';
const RouterComponent = () => {
    <Router>
        <Scene
            key="First"
            component={First}
            initial />

      ... your other scenes
     </Router>
}
export default RouterComponent;

然后在您的索引页面或加载的任何地方添加此组件

import React, { Component } from 'react'
import RouterComponent from './Router'

class AppContainer extends Component {
   render() {
     return (
       <RouterComponent />
     );
    }
 }


export default AppContainer;

现在您可以从您的代码中调用它。任何疑问都会问他们：P

react-native router flux操作不导航到其他页面

1 个答案: