在本机反应中通过导航传递数据时出错答案

【问题标题】：error in passing data through navigation in react native在本机反应中通过导航传递数据时出错
【发布时间】：2021-06-24 07:28:15
【问题描述】：

我是反应原生世界的新手，我正在尝试将日历与时隙选择器集成，因此我试图将所选日期从日历传递到时隙选择器页面，但我有这个当我按下日历中的日期时出错，我无法修复它。 TypeError: undefined is not an object (evalating 'navigation.navigate')

这是我的日历功能：

const RequestMeeting = ({ navigation }) => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={{ margin: 100, }}>
      <Button title="Show modal" onPress={toggleModal} />

      <Modal isVisible={isModalVisible} avoidKeyboard={true} scrollHorizontal={true} propagateSwipe={true}>
        <ScrollView>
          <View style={{ margin: 50, backgroundColor: 'gray', borderRadius: 20, padding: 20, margin: 20 }}>
        
            <Text style={styles.heading}>Request to Buy/Rent</Text>

            <View style={{ paddingBottom: 10 }}></View>

            <View >
              <Calendar
                onDayPress={(day) => navigation.navigate("Slot", { bookingDate: day })}
                style={styles.calendar}
                hideExtraDays
                theme={{
                  selectedDayBackgroundColor: 'green',
                  todayTextColor: 'green',
                  arrowColor: 'green',
                }}
              />
            </View>

            <Button
              buttonStyle={styles.register}
              title="Send Buy/Rent request" 
              />
            <Button
             buttonStyle={styles.cancelbtn} 
             title="Cancel" 
             onPress={toggleModal} 
             />

          </View>
        </ScrollView>
      </Modal>
    </View>
  );
};

这是我的时隙选择器功能：

const jsonData = {
    "slots": {
        "slot1": "9:00am to 9:30am",
        "slot2": "9:30am to 10:00am",
        "slot3": "10:00am to 10:30am",
        "slot4": "10:30am to 11:00am",
        "slot5": "11:00am to 11:30am",
        "slot6": "11:30am to 12:00pm"
    }
}

const Slot = ({ navigation }) => {
    const onPressBack = () => {
        const { goBack } = navigation
        goBack()
    }
    const slots = jsonData.slots
    const slotsarr = Object.keys(slots).map(function (k) {
        return (
            <View key={k} style={{ margin: 5 }}>

                <TouchableOpacity >
                    <Text>{slots[k]}</Text>
                </TouchableOpacity>
            </View>)
    });
    return (
        <View style={styles.container}>
            <StatusBar barStyle="light-content" />
            <View >
                <TouchableOpacity onPress={() => onPressBack()}><Text >Back</Text></TouchableOpacity>
                <Text ></Text>
                <Text ></Text>
            </View>
            { slotsarr}
        </View>
    );
}

【问题讨论】：

标签： reactjs react-native react-navigation react-functional-component

【解决方案1】：

这个错误意味着无论你在渲染RequestMeeting 或Slot（无论哪个有错误）它都没有得到navigation 属性。如果它被渲染为Screen，那么它将从Navigator 获得道具。如果它不是顶级屏幕，那么您需要从父级传递道具或使用useNavigation 钩子访问它。

文档：Access the navigation prop from any component

【讨论】：