从选项卡视图屏幕导航到另一个屏幕不起作用

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

按下“开始”按钮后，我试图在“注册”屏幕上导航，但此处显示错误。在它们正常工作之前我使用了相同的导航方法，但在这里它给出了错误。请指出我哪里出错了？

如何从选项卡视图导航到任何其他（不是选项卡视图的这三个屏幕）屏幕？

我尝试了运行 Home.js 其他方式意味着不在选项卡视图中使用然后它是运行并且导航也有效但是当我在选项卡中调用 Home.js - 查看即在 Tab.js 中，然后它显示屏幕截图中的错误。

Answer 1

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

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

老实说，我无法测试您的代码，因为这会花费太多时间。您如何检查这个简单的工作示例，了解您要查找的内容并将其与您的代码相匹配。

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

https://snack.expo.io/HJ5OqS5qZ

从选项卡视图屏幕导航到另一个屏幕不起作用

navigate to another screen from tab-view screen not working

javascript

navigation

tabview

react-native

react-native-android