Question

我无法获得任何可见的输出。它只是呈现我给定的任何默认路由。

import React , {Component} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import {createSwitchNavigator, createAppContainer, createStackNavigator} from 'react-navigation';


import Completed from './Completed';
import Unattempted from './Unattempted';
import Paused from './Paused';
import All from './All';
import Free from './Free';


const MainNavigator=createStackNavigator({
  all:{screen:All},
  paused:{screen:Paused},
  completed:{screen:Completed},  
  unattempted:{screen:Unattempted},
  free:{screen:Free}, 
},{
  initialRouteName:'All'
});


const TestNavigator=createAppContainer(MainNavigator);

export default TestNavigator;


export class Test extends React.Component{
  render(){
    const {navigate}=this.props.navigation;
    return(
      <View style={{
        flex:1,
        flexDirection:'row',
        alignContent:'center',
        justifyContent:'center'
      }}>  
        <Button
          onPress={()=>this.props.navigation.navigate('All')}
          title="All"
        />
        <Button
          onPress={()=>this.props.navigation.push('Paused')}
          title="Paused"
        />   
        <Button
          onPress={()=>this.props.navigation.navigate('Completed')}
          title="Completed"
        />
      </View>
    );
  }
}

以下是我的all.js文件的内容

import  React, {Component}  from 'react';
import {View, StyleSheet, Text, Button, ScrollView, Row, Image} from 'react-native';
import { directive } from '@babel/types';
import { Directions } from 'react-native-gesture-handler';
import AIIMS from './AIIMS';

export default class Qbank extends Component {
  state={isdisplayed:false}
  render() {
    return (

      <View style={styles.container}>
        <View style={{
          height:170,
          width:426,
          alignContent:"center",
          alignItems:'center'
        }}>
          <View style={{
            marginLeft:10,
            marginRight:10,
            marginTop:10,
            padding:40,
            height:70,
            width:370,
            backgroundColor:'powderblue',
            alignContent:"center",
            alignItems:'center',
            justifyContent:'center'
          }}>
            <Text>
              Topic wise collection of test series.
            </Text>
            <Text style={{alignContent:'space-around'}}>
              26500+
            </Text>
          </View>
          <View>
            <Text style={{
              color:'black',
              fontSize:18,
              alignItems:'flex-start'
            }}> Test Completed</Text>
            <Text style={{
              color:'black',
              fontSize:30,
              alignItems:'flex-end',
              fontWeight:'bold'
            }}> 0/25  </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles=StyleSheet.create({
  container: {
   flex: 1,
  },
  boxContainer:{
    flex:1,
    alignContent:'center',
    justifyContent:'center',
  },
  content:{
    flex:1,
    justifyContent:'center',
    alignContent:'space-between',
  },
  header:{
    backgroundColor:'white',
  }
});

我所能看到的一切 enter image description here

无法按要求获得屏幕之间的导航。第一个代码是App.js文件。 React Navigation有点新。

反应导航不起作用。没有显示输出

0 个答案: