从标签视图屏幕导航到另一个屏幕不起作用 [英] navigate to another screen from tab-view screen not working

问题描述

以下是我的代码:-发布完整代码

following is my code:- posting full code

index.android.js

index.android.js

import React, { Component } from 'react';
    import { AppRegistry, Text, StyleSheet, View, NetInfo, Alert, AsyncStorage } from 'react-native';
    import Splash from './app/screens/Splash'
    import { StackNavigator } from 'react-navigation'
    import Login from './app/screens/Login'
    import Register from './app/screens/Register'
    import Check from './app/screens/Check'
    import Qwerty from './app/screens/Qwerty'
    import Home from './app/screens/Home'


    var STORAGE_KEY = 'token';
    var DEMO_TOKEN;

    class Splashscreen extends React.Component {
      static navigationOptions = {
         header: null
      };

     async componentDidMount() {
        const { navigate } = this.props.navigation;

        var DEMO_TOKEN = await AsyncStorage.getItem(STORAGE_KEY);

        if (DEMO_TOKEN === undefined) {
          navigate("Login");
        } else if (DEMO_TOKEN === null) {
          navigate("Splash");
        } else {
           navigate("Temp");
        }
      };



      render() {
        const { navigate } = this.props.navigation;
        return(
        <View style={styles.wrapper}>
          <View style={styles.titlewrapper}>
                  <Text style={styles.title}> Loding... </Text>
          </View>
        </View>
        );
      }
    }

    const Section = StackNavigator({
       Root: {screen: Splashscreen},
       Splash: { screen: Splash },
       Login: { screen: Login },
       Registerscreen: { screen: Register },
       Temp: { screen: Check },
       Qwerty:{screen: Qwerty},
       Home:{screen: Home},
    });

    AppRegistry.registerComponent('shopcon', () => Section);

在这里我可以正确导航而没有任何错误，

here i can navigate properly without any error Now,

这是我的tab.js =>在这里，我给出了三个选项卡(主要在第一个home.js中工作)

This is my tab.js => Here i given three tabs (mainly working in first home.js)

  import React, { PureComponent } from 'react';
  import { Animated, StyleSheet,View } from 'react-native';
  import { TabViewAnimated, TabBar } from 'react-native-tab-view';
  import { StackNavigator } from 'react-navigation';
  import Qwerty from './Qwerty';
  import Home from './Home';
  //import Login from './Login'

  import type { NavigationState } from 'react-native-tab-view/types';

  type Route = {
   key: string,
   title: string,
 };

type State = NavigationState<Route>;

class Tab extends PureComponent<void, *, State> {

static navigationOptions = {
  header: null
};

state: State = {
  index: 0,
  routes: [
    { key: '1', title: 'Home' },
    { key: '2', title: 'Shops' },
    { key: '3', title: 'Bookmark' },
  ],
};

_first: Object;
_second: Object;
_third: Object;

_handleIndexChange = index => {
  this.setState({
    index,
  });
};

_renderLabel = props => ({ route, index }) => {
  const inputRange = props.navigationState.routes.map((x, i) => i);
  const outputRange = inputRange.map(
    inputIndex => (inputIndex === index ? '#fff' : '#222')
  );
  const color = props.position.interpolate({
    inputRange,
    outputRange,
  });

  return (
    <View>
      <Animated.Text style={[styles.label, { color }]}>
        {route.title}
      </Animated.Text>
    </View>
  );
};

_renderHeader = props => {
  return (
    <TabBar
      {...props}
      pressColor="#999"
     // onTabPress={this._handleTabItemPress}
      renderLabel={this._renderLabel(props)}
      indicatorStyle={styles.indicator}
      tabStyle={styles.tab}
      style={styles.tabbar}
    />
  );
};

_renderScene = ({ route }) => {
  switch (route.key) {
    case '1':
      return (
        <Home
          ref={el => (this._first = el)}
          style={[styles.page, { backgroundColor: '#E3F4DD' }]}
        />
      );
    case '2':
      return (
        <Qwerty
          ref={el => (this._second = el)}
          style={[styles.page, { backgroundColor: '#E6BDC5' }]}
          initialListSize={1}
        />
      );
    case '3':
      return (
        <Qwerty
          ref={el => (this._third = el)}
          style={[styles.page, { backgroundColor: '#EDD8B5' }]}
          initialListSize={1}
        />
      );
    default:
      return null;
  }
};

render() {
  return (

    <TabViewAnimated
      style={[styles.container, this.props.style]}
      navigationState={this.state}
      renderScene={this._renderScene}
      renderHeader={this._renderHeader}
      onIndexChange={this._handleIndexChange}
     // onRequestChangeTab={this._handleIndexChange}
      lazy
    />
  );
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
indicator: {
  backgroundColor: '#fff',
},
label: {
  fontSize: 18,
  fontWeight: 'bold',
  margin: 8,
},
tabbar: {
  backgroundColor: '#ff6600',
},
tab: {
   opacity: 1,
  // width: 140,
},
page: {
  backgroundColor: '#f9f9f9',

},
});

export default Tab;

这是Home.js =>如果我直接使用它，则运行良好，但在Tab.js中使用它时，则运行不正常

This is Home.js => It is running well if i am using it directly but not running when using it in Tab.js

GoPressed(navigate){
    navigate("Registerscreen");
  }

  render() {
     const { navigate } = this.props.navigation;
      contents = this.state.qwerty.data.map((item) => {
        return (
            <View>   
                {item.p1.shareproductid ? <TouchableHighlight onPress={() => this.GoPressed(navigate)} style={styles.button}>
                    <Text style={styles.buttonText}>
                      Go
                    </Text>
                  </TouchableHighlight> : null }

              <Text>
                {item.p1.content}
              </Text>
            </View>
          );
       });
      return (
        <ScrollView style={styles.container}>
          {contents}
        </ScrollView>
      );
    }

我试图在按下"Go"按钮后在注册"屏幕上导航，但是这里显示了错误.在它们正常工作之前，我使用了相同的导航方法，但是在这里却给出了错误.请告诉我我要去哪里错了?

I am trying to navigate on Register screen after Go button pressed, But here it shows me error. I have used same navigation method before they works correctly but here it gives error. please show where i am going wrong?

如何从选项卡视图导航到其他任何屏幕(不是选项卡视图的这三个屏幕)?

How to navigate to any other(not these three screens of tab-view ) screen from tab-view?

我尝试以其他方式运行Home.js，这意味着不在选项卡视图中使用它，然后运行并且导航也可以，但是当我在选项卡视图中调用Home.js时，即在Tab.js中，则显示错误，如屏幕截图所示

I tried running Home.js in other way means not using in tab view then it is running and navigation also works but when i am calling Home.js in tab-view i.e in Tab.js then it showing error as in screenshot.

推荐答案

似乎您导航到错误的屏幕名称. 这应该做.

Seems like you're navigating to the wrong screen name. This should do it.

GoPressed(navigate){
    navigate("Registerscreen");
  }

老实说，我无法测试您的代码，因为这会花费太多时间. 您如何查看这个简单的示例，该示例说明了您所寻找的内容并将其与您的代码相匹配.

I honestly can't test out your code as it'll take too much time. How about you check out this simple working example of what your looking for and match it with your code.

进入设置"标签，然后您可以单击按钮导航到其他不在标签中的注册屏幕.

Go the Settings tab and then you can click on the button to navigate to the other Registerscreen which is not in the Tabs.

https://snack.expo.io/HJ5OqS5qZ

这篇关于从标签视图屏幕导航到另一个屏幕不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！