javascript - 如何解决 stackNavigator 的问题

Question

在此代码中，我在 ListView 上填充 json 数据 .. 并单击项目值后，在新屏幕上传递该特定值.. 。我创建了 MainActivity 我正在填充 JSON 值和 SecondActivity sendng 选定的项目值，要在我正在使用的类之间导航

export default MyNewProject = StackNavigator(
{
  First: { screen: MainActivity },

  Second: { screen: SecondActivity }
});

// 得到错误“未定义不是一个函数（评估'（0 _reactnavigation.stacknavigator）'）”..

import React, { Component } from 'react';

    import { StyleSheet, Text, View, ListView, ActivityIndicator } from 'react-native';

    import { StackNavigator } from 'react-navigation';

    class MainActivity extends Component {

      constructor(props) {

        super(props);

        this.state = {

          // Default Value of this State.
          Loading_Activity_Indicator: true

        }
      }

      componentDidMount() {

        return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php')
          .then((response) => response.json())
          .then((responseJson) => {
            let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
            this.setState({
              Loading_Activity_Indicator: false,
              dataSource: ds.cloneWithRows(responseJson),
            }, function() {

              // In this block you can do something with new state.

            });
          })
          .catch((errorMsg) => {

            console.error(errorMsg);

          });
      }

      ListViewItemSeparator = () => {
        return (
          <View
            style={{
              height: .5,
              width: "100%",
              backgroundColor: "#000",
            }}
          />
        );
      }

      Navigate_To_Second_Activity=(fruit_name)=>
        {
          //Sending the JSON ListView Selected Item Value On Next Activity.
          this.props.navigation.navigate('Second', { JSON_ListView_Clicked_Item: fruit_name });

        }

      static navigationOptions =
        {

         title: 'MainActivity',

        };


      render()
      {
        if (this.state.Loading_Activity_Indicator) {
          return (
            <View style={styles.ActivityIndicator_Style}>

              <ActivityIndicator size = "large" color="#009688"/>

            </View>
          );
        }

        return (

          <View style={styles.MainContainer}>

            <ListView

              dataSource={this.state.dataSource}

              renderSeparator= {this.ListViewItemSeparator}

              renderRow={(rowData) => <Text style={styles.rowViewContainer} 
              onPress={this.Navigate_To_Second_Activity.bind(this, rowData.fruit_name)} >{rowData.fruit_name}</Text>}

            />

          </View>
        );
      }
    }

    class SecondActivity extends Component
    {
      static navigationOptions =
      {
         title: 'SecondActivity',
      };

      render()
      {
         return(
            <View style = { styles.MainContainer }>

               <Text style = { styles.TextStyle }> { this.props.navigation.state.params.JSON_ListView_Clicked_Item } </Text>

            </View>
         );
      }
    }

    export default MyNewProject = StackNavigator(
    {
      First: { screen: MainActivity },

      Second: { screen: SecondActivity }
    });

    const styles = StyleSheet.create(
    {
      MainContainer:
      {
         justifyContent: 'center',
         flex:1,
         margin: 10

      },

      TextStyle:
      {
         fontSize: 23,
         textAlign: 'center',
         color: '#000',
      },

      rowViewContainer: 
      {

        fontSize: 17,
        paddingRight: 10,
        paddingTop: 10,
        paddingBottom: 10,

      },

      ActivityIndicator_Style:
      {

        flex: 1, 
        alignItems: 'center', 
        justifyContent: 'center',
        left: 0, 
        right: 0, 
        top: 0, 
        bottom: 0,

      }

    });

// 我尝试了可能的事情但没有得到解决方案..我被卡住了，这可能是小事但没有得到解决方案..我需要帮助..谢谢

标签： javascriptreactjsreact-nativereact-redux

Answer 1

将您的代码更改为此。

import { createStackNavigator } from 'react-navigation';    

export default MyNewProject = createStackNavigator(
    {
      First: { screen: MainActivity },

      Second: { screen: SecondActivity }
    });