Javascript 如何解决stackNavigator的问题

在这段代码中，我在ListView上填充json数据。单击项值后，在新屏幕上传递该特定值。 我已经创建了MainActivity，在其中填充JSON值，并在第二个Activity上发送所选项目值， 在我使用的类之间导航

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

  Second: { screen: SecondActivity }
});

//获取错误“undefined不是一个函数（正在评估“（0_reactnavigation.stacknavigator）”

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、列表视图、ActivityIndicator}；
从“react navigation”导入{StackNavigator}；
类MainActivity扩展组件{
建造师（道具）{
超级（道具）；
此.state={
//此状态的默认值。
正在加载活动指示器：true
}
}
componentDidMount（）{
返回获取（'https://reactnativecode.000webhostapp.com/FruitsList.php')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
让ds=newListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
这是我的国家({
加载活动指示器：false，
数据源：ds.cloneWithRows（responseJson），
}，函数（）{
//在这个模块中，您可以对新状态执行某些操作。
});
})
.catch（（errorMsg）=>{
控制台错误（errorMsg）；
});
}
ListViewItemSeparator=（）=>{
返回(
);
}
导航到第二个活动=（水果名称）=>
{
//在下一个活动中发送JSON ListView选定项值。
this.props.navigation.navigate（'Second'，{JSON\u ListView\u Clicked\u Item:fruit\u name}）；
}
静态导航选项=
{
标题：“主要活动”，
};
render（）
{
if（此.state.Loading\u活动\u指示器）{
返回(
);
}
返回(
{rowData.fruit_name}
/>
);
}
}
类SecondActivity扩展组件
{
静态导航选项=
{
标题：“第二项活动”，
};
render（）
{
返回(
{this.props.navigation.state.params.JSON_ListView_Clicked_Item}
);
}
}
导出默认MyNewProject=StackNavigator(
{
第一：{screen:MainActivity}，
第二个：{屏幕：第二个活动}
});
const styles=StyleSheet.create(
{
主容器：
{
为内容辩护：“中心”，
弹性：1，
差额：10
},
文本样式：
{
尺寸：23，
textAlign:'中心'，
颜色：“#000”，
},
rowViewContainer：
{
尺寸：17，
paddingRight:10，
paddingTop:10，
填充底部：10，
},
活动指示器样式：
{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
左:0,，
右:0,，
排名：0，
底部：0，
}
});

//我试过了，但没有找到解决办法。。我被困住了，这可能是一件小事，但没有得到解决方案。。 我需要帮助。。

---

谢谢

stackNavigator已被弃用，您应该改用createStackNavigator

更多信息，请访问：

编辑：

---

stackNavigator不推荐使用，您应该改用createStackNavigator

更多信息，请访问：

编辑：

---

把你的代码改成这个

import { createStackNavigator } from 'react-navigation';    

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

      Second: { screen: SecondActivity }
    });

---

把你的代码改成这个

import { createStackNavigator } from 'react-navigation';    

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

      Second: { screen: SecondActivity }
    });

试试这个代码

 import React, { Component } from 'react';

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

        import { createStackNavigator } 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 = createStackNavigator (
            {
              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,

          }

        });

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、列表视图、ActivityIndicator}；
从“反应导航”导入{createStackNavigator}
类MainActivity扩展组件{
建造师（道具）{
超级（道具）；
此.state={
//此状态的默认值。
正在加载活动指示器：true
}
}
componentDidMount（）{
返回获取（'https://reactnativecode.000webhostapp.com/FruitsList.php')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
让ds=newListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
这是我的国家({
加载活动指示器：false，
数据源：ds.cloneWithRows（responseJson），
}，函数（）{
//在这个模块中，您可以对新状态执行某些操作。
});
})
.catch（（errorMsg）=>{
控制台错误（errorMsg）；
});
}
ListViewItemSeparator=（）=>{
返回(
);
}
导航到第二个活动=（水果名称）=>
{
//在下一个活动中发送JSON ListView选定项值。
this.props.navigation.navigate（'Second'，{JSON\u ListView\u Clicked\u Item:fruit\u name}）；
}
静态导航选项=
{
标题：“主要活动”，
};
render（）
{
if（此.state.Loading\u活动\u指示器）{
返回(
);
}
返回(
{rowData.fruit_name}
/>
);
}
}
类SecondActivity扩展组件
{
静态导航选项=
{
标题：“第二项活动”，
};
render（）
{
返回(
 import React, { Component } from 'react';

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

        import { createStackNavigator } 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 = createStackNavigator (
            {
              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,

          }

        });