Javascript 反应本机-将导航道具从父级传递到子级

我正在尝试创建一个简单的ish移动应用程序，但我对它还很陌生。我花了一些时间查找我所遇到的错误。这似乎是一个常见的问题，但他们都有相同/相似的解决方案，但这些解决方案对我不起作用

我想做什么？现在应用程序有两个页面，主屏幕（概览卡）和添加卡屏幕

概览卡上有一个按钮，用于添加卡片

添加卡允许您填写一些文本输入框和

添加卡应允许您按下保存按钮并返回概览卡屏幕，查看您在表单中输入的数据 然而，我在第三步遇到了困难。我试图让“保存”按钮将用户导航回概览卡，但只会出现错误

下面是我的代码，我得到的错误，然后是我尝试过的

App.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,
  }
});

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'
      }

});

import React，{Component}来自'React'；
从“react native”导入{样式表、视图、文本、TextInput、TouchableOpacity}；
从“反应本机元素”导入{Input}
从“反应本机手势处理程序”导入{ScrollView}；
//从“../storage/settingsStorage”导入{loadSettings，saveSettings}；
类AddCardScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
前两个：''，
最后四个：''，
最近日期：“”
};
this.addFT=this.addFT.bind（this）
this.addLF=this.addLF.bind（this）
this.addRecAmt=this.addRecAmt.bind（this）
}
静态导航选项={
标题：“添加卡片”
};
addFT（前两名）{
this.setState（Object.assign（{}，this.state.firstTwo，{firstTwo}））；
}
addLF（最后四个）{
this.setState（Object.assign（{}，this.state.lastFour，{lastFour}））；
}
addRecAmt（recentAmt）{
this.setState（Object.assign（{}，this.state.recentAmt，{recentAmt}））；
}
//handleSubmit（）{
//警报（'已保存新卡。返回主页查看添加'）；
//navigation.navigate（'Home'））
//}//前二，后四，最近
render（）{
const{navigation}=this.props；
返回(
“添加新卡！”
导航。导航（'Home'）}>/**此处2**
拯救
);
}
}
//this.handleSubmit.bind（this）
导出默认的AddCardScreen；
const styles=StyleSheet.create({
输入容器：{
加油站：15
},
文本输入：{
边框颜色：'#FFFFFF'，
textAlign:'中心'，
边框宽度：1，
边界宽度：1，
身高：50，
尺寸：17，
paddingLeft:20，
paddingRight:20
},
保存按钮：{
边框宽度：1，
边框颜色：“#007BFF”，
背景颜色：“#007BFF”，
填充：15，
保证金：5
},
saveButtonText：{
颜色：“#FFFFFF”，
尺寸：20，
textAlign:“中心”
}
});

我收到的错误：

在App.js中，您可以看到我输入的**HERE**。当我尝试运行此应用程序时，应用程序加载良好，直到我单击“添加卡”按钮。我得到了这个错误：

undefined不是一个对象（评估'this.props.navigation'）

如果我从App.js中取出

navigate={this.props.navigation}

部分，该应用程序将按照预期再次加载，但这次我可以单击“添加卡”按钮并进入下一个屏幕，不会出现任何问题。我填写表单（AddCard.js中的TextInput部分），但当我单击“保存”按钮时，应用程序崩溃。错误为：

TypeError:undefined不是对象（正在评估“navigation.navigate”）

。最有可能是因为我正在使用onPress，它在AddCard.js中显示**HERE 2**。handleSubmit（）当前已被注释掉，但它以前位于onPress中

我所尝试的：

我看到的一些答案是，我需要将导航从家长传递给孩子，这将使它起作用。通过尝试，我得到了我前面提到的错误。我还看到有人提到使用“withNavigation”或“useNavigation”，这本来应该允许孩子访问导航，但这对我也不起作用。下面是一些我试图遵循的链接

---

谢谢你的阅读，希望我的解释足够清楚

我想你的问题就在这里：

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

函数AddCardScreen（{navigation}）{
返回(
);
}

• 没有

  此

  ，您不在类组件中，因此

  此

  不存在
• 您试图传递的道具应称为

  导航

  ，而不是

  导航

  ，因为这是您试图在子组件中访问道具的方式

• 导航

  属性需要在函数参数

  函数AddCardScreen（{navigation}）

  中被分解，这与您在

  主屏幕

  中已经做的一样

---

我想你的问题就在这里：

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

函数AddCardScreen（{navigation}）{
返回(
);
}

• 没有

  此

  ，您不在类组件中，因此

  此

  不存在
• 您试图传递的道具应称为

  导航

  ，而不是

  导航

  ，因为这是您试图在子组件中访问道具的方式

• 导航

  属性需要在函数参数

  函数AddCardScreen（{navigation}）

  中被分解，这与您在

  主屏幕

  中已经做的一样

---

您能详细介绍一下吗？我在里面添加了{navigation}