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 =＆gt;在这里我给出了三个标签（主要在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 =＆gt;如果我直接使用它但在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按钮后，我试图在Register屏幕上导航，但这里显示错误。我在它们正常工作之前使用了相同的导航方法，但这里给出了错误。请告诉我哪里出错？

如何从标签视图导航到任何其他（不是这三个标签视图屏幕）屏幕？

我尝试以其他方式运行Home.js意味着不在标签视图中使用然后它正在运行并且导航也可以工作但是当我在Tab-view中调用Home.js时，即在Tab.js中然后它在屏幕截图中显示错误

Answer 1

好像您正在导航到错误的屏幕名称。这应该做到。

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

老实说，我不能测试你的代码，因为它需要花费太多时间。你怎么看看你想要的这个简单的工作示例，并将其与你的代码相匹配。

转到设置标签，然后您可以点击按钮以导航到标签中没有的其他注册屏幕。< / p>

https://snack.expo.io/HJ5OqS5qZ

从标签视图屏幕导航到另一个屏幕不起作用

1 个答案: