javascript - 从选项卡 View 屏幕导航到另一个屏幕不起作用

Question

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

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);

现在我可以正确导航，没有任何错误，

这是我的 tab.js => 这里我给出了三个选项卡(主要在第一个 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 中使用它时则无法运行

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”按钮后，我尝试在“注册”屏幕上导航，但这里显示错误。在它们正常工作之前我已经使用了相同的导航方法，但在这里它给出了错误。请指出我哪里出错了？

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

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

Answer 1

您似乎导航到了错误的屏幕名称。这应该可以做到。

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

老实说，我无法测试您的代码，因为它需要太多时间。您可以查看这个简单的工作示例来了解您正在寻找的内容并将其与您的代码相匹配。

转到设置选项卡，然后您可以单击按钮导航到不在选项卡中的其他注册屏幕。

https://snack.expo.io/HJ5OqS5qZ