Question

在加载json数据时，我有启动画面。一旦他们显示数据。然而，我尝试添加导航到混合，我在App.js中调用导航而不是带有加载的json数据的屏幕。我怎么能将数据传递到另一个屏幕？

目前我正在加载它两次。第一次在App.js上检查它是否已加载，第二次在PingItem.js上。它有效，但速度很慢。那么有没有办法将ajax数据传递到另一个屏幕？

App.js

import React, { Component } from "react";
import { Dimensions, StyleSheet, Text, View, Image } from "react-native";

import ajax from "./components/ajax.js";
import Navigation from "./components/Navigation.js";

import picSplash from "./assets/Splash.png";

export default class App extends Component<{}> {
  state = {
    pings: []
  };
  async componentDidMount() {
    const pings = await ajax.fetchInitialPings();
    this.setState({ pings });
  }
  render() {
    return (
      <View style={styles.container}>
        {this.state.pings.length > 0 ? (
          /* <PingList pings={this.state.pings} /> */
          <Navigation />
        ) : (
          <Image source={picSplash} style={styles.splash} />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#5BDAB8",
    width: "100%",
    height: "100%"
  },
  splash: {
    flex: 1,
    width: Dimensions.get("window").width,
    resizeMode: "contain"
  }
});

Navigation.js

import { StackNavigator, TabNavigator } from "react-navigation";
import PingList from "./PingList.js";
import Profile from "./Profile.js";

const Navigation = TabNavigator(
  {
    PingList: { screen: PingList },
    Profile: { screen: Profile }
  },
  {
    tabBarOptions: {
      activeTintColor: "white",
      inactiveTintColor: "red",
      swipeEnabled: true,
      showLabel: true,
      style: {
        backgroundColor: "green"
      }
    }
  }
);

export default Navigation;

profile.js

import React, { Component } from "react";
import { StyleSheet, View, StatusBar, Text } from "react-native";

class Profile extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Profile</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#f5f5f5",
    paddingTop: 20,
    height: "100%"
  },
  bar: {
    height: 20
  },
  title: {
    color: "white",
    textAlign: "center",
    fontWeight: "bold"
  },
  list: {
    flex: 1,
    paddingTop: 0,
    paddingBottom: 100,
    backgroundColor: "#f5f5f5"
  }
});

export default Profile;

PingList.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { StyleSheet, View, FlatList, StatusBar, Text } from "react-native";
import PingItem from "./PingItem";
import ajax from "./ajax.js";

class PingList extends React.Component {
  state = {
    pings: []
  };
  async componentDidMount() {
    const pings = await ajax.fetchInitialPings();
    this.setState({ pings });
    console.log(pings);
    console.log(this.state.pings);
  }

  static propTypes = {
    pings: PropTypes.array.isRequired
  };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          barStyle="light-content"
          hidden={false}
          backgroundColor="green"
        />
        <View style={styles.bar}>
          <Text style={styles.title}>Pingster</Text>
        </View>

        <FlatList
          style={styles.list}
          data={this.state.pings}
          renderItem={({ item }) => <PingItem ping={item} />}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#5BDAB8",
    paddingTop: 20,
    height: "100%"
  },
  bar: {
    height: 20
  },
  title: {
    color: "white",
    textAlign: "center",
    fontWeight: "bold"
  },
  list: {
    flex: 1,
    paddingTop: 0,
    paddingBottom: 100,
    backgroundColor: "#f5f5f5"
  }
});

export default PingList;

Answer 1

您可以使用props

将ping数据传递给navigations.js

<Navigation pings={this.state.pings}/>

在您的navigation.js中，将此值传递给Pinglist.js

const Navigation = TabNavigator(
    {
    PingList: { screen: PingList },
    Profile: { screen: <Profile pings={this.props.pings}/> }
},
{
    tabBarOptions: {
      activeTintColor: "white",
      inactiveTintColor: "red",
      swipeEnabled: true,
      showLabel: true,
    style: {
      backgroundColor: "green"
    }
  }
}

现在，您可以使用this.props.pings

访问pingList.js中的ping

React-native将ajax结果调用传递给另一个屏幕

1 个答案: