react native - 將導航道具從父級傳遞給子級

Question

我正在嘗試創建一個簡單的移動應用程序，但我對此很陌生。 我花了一些時間搜索我遇到的錯誤。 這似乎是一個常見問題，但他們都有相同/相似的解決方案，但這些解決方案對我不起作用。

我想做什么？ 現在該應用程序有兩個頁面，主屏幕（概覽卡）和添加卡屏幕。

1. 概覽卡上有一個按鈕，可將您帶到添加卡。
2. Add Card 允許您填寫一些 TextInput 框和
3. 添加卡應該允許您按下保存按鈕並返回到概覽卡屏幕並查看您在表單中輸入的數據。

但是，我被困在第 3 步。我試圖讓“保存”按鈕將用戶導航回概覽卡，但只是出現了錯誤。

下面是我的代碼，我得到的錯誤，然后是我嘗試過的。

應用程序.js

import React from 'react';
import { StyleSheet, Text, TextInput, View, Button, TouchableOpacity, ShadowPropTypesIOS } from 'react-native';
import AddCard from './components/AddCard.js';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={styles.homeContainer}>
      <Button title="Add Card" onPress={() => navigation.navigate('Add Card')}/>
      {/* <Text value={this.props.inputValFT}/> */}
      <Text style={styles.textStyle} >VISA xxxx</Text>
      <Text style={styles.textStyle}>MASTERCARD xxxx</Text>
      <Text style={styles.textStyle}>AMEX xxxx</Text>
    </View>
  );
}

function AddCardScreen() {
  return (
    <View style={styles.addCardContainer}>
      <AddCard navigation={this.props.navigation} /> // **HERE**
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Overview Cards' }} />
        <Stack.Screen name="Add Card" component={AddCardScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
// function AddCardButton(){
//       return (
//           <View style={styles.buttonContainer}>
//               <TouchableOpacity>
//                   <Text style={styles.button}>Add Card</Text>
//               </TouchableOpacity>
//           </View>
//       );
//   }

export default App;

const styles = StyleSheet.create({
  homeContainer: {
    flex: 1,
    backgroundColor: '#ef95b1',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  addCardContainer: {
    flex: 1,
    backgroundColor: '#28cdf0',
    justifyContent: 'flex-start',
  },
  buttonContainer: {
    flexDirection: 'row',
    alignSelf: 'flex-end',
    marginTop: 15,
  },
  button: {
    flexDirection: 'row',
    alignSelf: 'flex-end',
    marginTop: 15,
    right: 10,
    backgroundColor: '#2565ae',
    borderWidth: 1,
    borderRadius: 12,
    color: 'white',
    fontSize: 15,
    fontWeight: 'bold',
    overflow: 'hidden',
    padding: 10,
    textAlign:'center',
  },
  textStyle: {
    padding: 10,
  }
});

導航.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import AddCardScreen from './AddCard';

  const RootStack = createStackNavigator(
    {
      Home: HomeScreen,
      AddCard: AddCardScreen,
    },
    {
      initialRouteName: 'Home',
    }
  );

  const AppContainer = createAppContainer(RootStack);

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#ef95b1',
      alignItems: 'center',
      justifyContent: 'flex-start',
    },
    textStyle: {
      padding: 10,
    }
  });

  export default createAppContainer(Navigation);

AddCard.js

import React, { Component } from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity } from 'react-native';
import { Input } from 'react-native-elements'
import { ScrollView } from 'react-native-gesture-handler';

// import { loadSettings, saveSettings } from '../storage/settingsStorage';

class AddCardScreen extends Component {
   constructor(props) {
    super(props);
    this.state = {
        firstTwo  : '',
        lastFour  : '',
        recentAmt : ''
    };

    this.addFT = this.addFT.bind(this)
    this.addLF = this.addLF.bind(this)
    this.addRecAmt = this.addRecAmt.bind(this)
   }

   static navigationOptions = {
       title: 'Add Card'
    };

   addFT(firstTwo) {
    this.setState(Object.assign({}, this.state.firstTwo, { firstTwo }));
  }

  addLF(lastFour) {
    this.setState(Object.assign({}, this.state.lastFour, { lastFour }));
  }

  addRecAmt(recentAmt) {
    this.setState(Object.assign({}, this.state.recentAmt, { recentAmt }));
  }

  // handleSubmit() {
  //  alert('New card saved. Returning to Home to view addition.');
  //  navigation.navigate('Home')
  // } // firstTwo, lastFour, recentAmt

    render() {
        const {navigation} = this.props;
        return (
            <ScrollView>
                <View style={styles.inputContainer}>
                    <Text h1> "Add a new card!" </Text> 
                    <TextInput 
                    style={styles.textInput}
                    placeholder="First two digits of card"
                    placeholderTextColor="#000000"
                    keyboardType={'number-pad'}
                    maxLength = {2}

                    onChangeText={this.addFT}
                    inputValFT={this.state.firstTwo}
                    />
                    <TextInput
                    style={styles.textInput}
                    placeholder="Last four digits of card"
                    placeholderTextColor="#000000"
                    keyboardType={'number-pad'}
                    maxLength = {4}

                    onChangeText={this.addLF}
                    inputValLF={this.state.lastFour}
                    />
                    <TextInput
                    style={styles.textInput}
                    placeholder="Most recent dollar amount"
                    placeholderTextColor="#000000"
                    keyboardType={'decimal-pad'}

                    onChangeText={this.addRecAmt}
                    inputValRA={this.state.recentAmt}
                    />
                </View>
                <View style={styles.inputContainer}>
                    <TouchableOpacity 
                    style={styles.saveButton}
                    onPress={() => navigation.navigate('Home')}> // ** HERE 2 **
                        <Text style={styles.saveButtonText}>Save</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        );
    }
}
// this.handleSubmit.bind(this)
export default AddCardScreen;

const styles = StyleSheet.create({
    inputContainer: {
        paddingTop: 15
      },
      textInput: {
        borderColor: '#FFFFFF',
        textAlign: 'center',
        borderTopWidth: 1,
        borderBottomWidth: 1,
        height: 50,
        fontSize: 17,
        paddingLeft: 20,
        paddingRight: 20
      },
      saveButton: {
        borderWidth: 1,
        borderColor: '#007BFF',
        backgroundColor: '#007BFF',
        padding: 15,
        margin: 5
      },
      saveButtonText: {
        color: '#FFFFFF',
        fontSize: 20,
        textAlign: 'center'
      }

});

我得到的錯誤：

在 App.js 中，您可以看到我輸入的 ** HERE **。當我嘗試運行它時，應用程序加載正常，直到我單擊“添加卡”按鈕。 我收到此錯誤： undefined is not an object (evaluating 'this.props.navigation') 。

如果我從 App.js 中取出navigate={this.props.navigation}部分，應用程序會再次按預期加載，但這次我可以單擊“添加卡”按鈕並毫無問題地進入下一個屏幕。 我填寫了表單（AddCard.js 中的 TextInput 部分），但是當我單擊“保存”按鈕時，應用程序崩潰了。 錯誤是： TypeError: undefined is not an object (evaluating 'navigation.navigate') 。 很可能是因為我在 onPress 上所做的事情，它在 AddCard.js 中顯示 ** HERE 2 **。 handleSubmit() 目前已被注釋掉，但它曾經在 onPress 內部。

我試過的：

我看到的一些答案是我需要將導航從父級傳遞給子級，這將使它起作用。 通過嘗試，我得到了我之前提到的錯誤。 我還看到有人提到使用“withNavigation”或“useNavigation”應該允許孩子訪問導航，但這對我也不起作用。 以下是我嘗試關注的一些鏈接。

如何將導航道具從父組件傳遞到 header？

將 navigation.navigate 傳遞給子組件

https://reactnavigation.org/docs/use-navigation/

感謝您的閱讀，希望我的解釋足夠清楚。

Answer 1

我認為您的問題出在此處：

function AddCardScreen({ navigation }) {
  return (
    <View style={styles.addCardContainer}>
      <AddCard navigation={navigation} />
    </View>
  );
}

• 沒有this ，你不在 class 組件中，因此this不存在
• 您嘗試傳遞的道具應該稱為navigation而不是navigate ，因為這就是您嘗試在子組件中訪問它的方式。
• navigation道具需要在 function 參數function AddCardScreen({ navigation })中進行解構，就像您已經為HomeScreen所做的一樣。