Question

我正在使用react native创建一个应用程序，并正在使用createStackNavigator创建导航以在屏幕之间进行导航（并发送信息）。

运行我的应用程序时，出现以下错误。

这是我的导航代码。

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import HomeScreen from './App';
import SecondActivity from './sermons';

const RootStack = createStackNavigator({
  Home: { 
    screen: HomeScreen 
  },
  Events: { 
   screen: SecondActivity 
  }
});


const AppContainer = createAppContainer(RootStack);

export default AppContainer;

这是App.js

import React from 'react';
import {
  StyleSheet,
  FlatList,
  View,
  Text,
  ActivityIndicator
} from 'react-native';
import AppContainer from './nav';

export default class HomeScreen extends React.Component  {
  static navigationOptions =
  {
     title: 'Sermons',
   
  }
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }
  componentDidMount(){
    fetch('http://d74bb1dc.ngrok.io/sermons.php')
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson
      }, () => {
        // In this block you can do something with new state.
      });
    })
    .catch((error) => {
      console.error(error);
    });
}
  ListViewItemSeparator = () => {
    return (
      <View
      style={{
        height: .5,
        width: "100%",
        backgroundColor: "#000",
      }}
    />
    );
  }

  OpenSecondActivity(id) {
    this.props.navigation.navigate("Second", { FlatListClickItemHolder: id});
  }
  render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={styles.MainContainer}>
        <FlatList
          data={this.state.dataSource}
          renderSeparator= {this.FlatListItemSeparator}
          renderItem={({item}) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} > {item.Name} {item.DateRecorded} </Text>}
          //keyExtractor={(item,index) => index}
          />

        <AppContainer />
      </View>
    );
  }
}

我该怎么做才能解决此问题？我已经用谷歌搜索了，但似乎没有任何解决办法。

Answer 1

在App.js内部，您不能像下面那样插入__ldg()

<AppContainer />

由于您已经导入了app.js return ( <View style={styles.MainContainer}> <FlatList data={this.state.dataSource} renderSeparator={this.FlatListItemSeparator} renderItem={({ item }) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} > {item.Name} {item.DateRecorded} </Text>} /> <AppContainer /> </View> );并包装在import HomeScreen from './App'内

要解决此问题，请创建一个HomeScreen.js并在其中插入您的app.js代码

<AppContainer />

然后将您的import React from 'react'; import { FlatList, View, Text, ActivityIndicator } from 'react-native'; export default class HomeScreen extends React.Component { static navigationOptions = { title: 'Sermons', } constructor(props) { super(props); this.state = { isLoading: true } } componentDidMount() { fetch('http://d74bb1dc.ngrok.io/sermons.php') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson }); }) .catch((error) => { console.error(error); }); } ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } OpenSecondActivity(id) { this.props.navigation.navigate("Second", { FlatListClickItemHolder: id }); } render() { if (this.state.isLoading) { return ( <View style={{ flex: 1, paddingTop: 20 }}> <ActivityIndicator /> </View> ); } return ( <View style={styles.MainContainer}> <FlatList data={this.state.dataSource} renderSeparator={this.FlatListItemSeparator} renderItem={({ item }) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} > {item.Name} {item.DateRecorded} </Text>} /> <AppContainer /> </View> ); } }代码导入app.js并按如下所示导出nav，

<AppContainer />

如有疑问，请随时提问。希望对您有帮助。

用于路由的组件必须是react native中的react组件

1 个答案: