Question

如何在 React Native 中将数据传递到另一个屏幕/类？

2021-01-13

1230

reactjs react-native navigation parameter-passing react-props

我正在尝试将键值对数组从 UebungenAnzeigen 类传递到 PlanBeenden 类，后者也是另一个屏幕。我正在使用 React 导航，我有一个 Stacknavigator。如果您能给我一个带有我的状态参数的直接示例代码，我将非常高兴。谢谢。

class UebungenAnzeigen extends React.Component {
  

    state = {

      data:[
        {
        
          "name": "Herabschauender Hund",
          "kategorie":"anfaenger",
          "erklaerung": "Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule",
          "photo": require('./fotosAsanas/Herabschauender_Hund.png'),
          "dauer": 30
      },
         
      {
          "name": "Katze",
          "kategorie" : "geuebt",
          "erklaerung": "Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule",
          "photo": require('./fotosAsanas/Katze.png'),
          "dauer": 20
      },
      {
        "name": 'Kuh',
        "kategorie" : "eingeschraenkt",
        "erklaerung": "Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule",
        "photo": require("./fotosAsanas/Kuh.png"),
        "dauer": 20
      },
        ]
    }

    render() {
   
      return (
     
      <View>
     <Button  title="Auswahl" onPress={() => this.props.navigation.navigate('PlanBeenden',  What to put 
     in here to get the state to the next page? )}/>
    </View>
  
      );

        
  }
}


// the class that should receive the data
//What do I have to put in to receive the data of UebungAnzeigen?

class PlanBeenden extends React.Component {

  render() {
    let data = this.props.route.params?.data; //How to do this correctly for state of UebungAnzeigen?
    console.log(data)
    return (
      <View >
        <Button style={stylesButtons.button} title="Go back" onPress={() => this.props.navigation.navigate('Auswahl')} />
      </View>
      );
  }
}

Answer 1

以下是将数据传递到下一个屏幕的方法：

//........
  render() {
    return (
      <View>
        <Button
          title="Auswahl"
          onPress={() =>
            this.props.navigation.navigate("PlanBeenden", { data: this.state.data })
          }
        />
      </View>
    );
  }
}

以下是工作示例： Expo Snack

完整源代码：

import * as React from 'react';
import { Text, View, Button, FlatList } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={UebungenAnzeigen} />
        <Stack.Screen name="PlanBeenden" component={PlanBeenden} />
        <Stack.Screen name="Auswahl" component={Auswah} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function Auswah() {
  return <Text>Auswahl</Text>;
}

class UebungenAnzeigen extends React.Component {
  state = {
    data: [
      {
        name: 'Herabschauender Hund',
        kategorie: 'anfaenger',
        erklaerung:
          'Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule',
        dauer: 30,
      },

      {
        name: 'Katze',
        kategorie: 'geuebt',
        erklaerung:
          'Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule',
        dauer: 20,
      },
      {
        name: 'Kuh',
        kategorie: 'eingeschraenkt',
        erklaerung:
          'Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule',
        dauer: 20,
      },
    ],
  };

  render() {
    return (
      <View>
        <Button
          title="Auswahl"
          onPress={() =>
            this.props.navigation.navigate('PlanBeenden', {
              data: this.state.data,
            })
          }
        />
      </View>
    );
  }
}

// the class that should receive the data
//What do I have to put in to receive the data of UebungAnzeigen?

class PlanBeenden extends React.Component {
  render() {
    let { data } = this.props.route.params; //How to do this correctly for state of UebungAnzeigen?
    console.log(JSON.stringify(data));
    return (
      <View>
        <Button
          title="Go back"
          onPress={() => this.props.navigation.navigate('Auswahl')}
        />
        {data && (
          <FlatList
            data={data}
            renderItem={({ item }) => <Text>{item.name}</Text>}
          />
        )}
      </View>
    );
  }
}

文档：传递参数

Answer 2

您必须传递一个对象

<Button  
  title="Auswahl" 
  onPress={() => this.props.navigation.navigate('PlanBeenden', {data: yourData} )}/>

并且在您的 PlanBenden 屏幕中您将收到参数

class PlanBeenden extends React.Component {
  const {data} = this.props.route
  
  //const data contain the data passed
  render(
    return(
      //your UI components
    )
  )

}