Question

以下是我的代码

这是我的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("Register");
}


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

我按下Register按钮后尝试在Go屏幕上导航，但这里显示错误。我在它们正常工作之前使用了相同的导航方法，但这里给出了错误。请告诉我哪里出错？

我尝试运行Home.js的代码稍微有些变化意味着没有在标签视图中使用它然后它正在运行并且导航也可以工作但是当我在标签视图中调用Home.js时Tab.js然后它会在屏幕截图中显示错误。

Answer 1

改变这一点，

onPress={() => this.GoPressed(navigate)}

用这个

onPress={() => { this.GoPressed(navigate) }}

或者

onPress={this.GoPressed.bind(this, navigate)}

我也认为

 const { navigate } = this.props.navigation;

这应该在map之前，因为您在map

中使用导航

Answer 2

您的渲染代码不正确，您在返回子句后从props获取navigate。

试试这个：

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

undefined不是一个函数（评估'导航（“注册”）'）导航无法正常工作

2 个答案: