REECT Native：为什么我的屏幕使用堆栈Navigator时可以传递我的屏幕（Props）？

Question

app.js

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Main">
          <Stack.Screen options={{headerShown: false}} name="Main" component={MainScreen} />
          <Stack.Screen options={{headerShown: false}} name="Report" component={ReportScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

./screens/reportscreen.js

import React from 'react';
import {
  StyleSheet,
  SafeAreaView,
  View,
  Text,
} from 'react-native';
import ReportReason from '../components/ReportReason';

const ReportScreen = ({route}) => {
    
    const textVal = '';
    if (route.param.title.length > 12){
        textVal = route.params.title.substring(0,10) + '...';
    }
    else {
        textVal = route.params.title;
    }
    
    return(
        <SafeAreaView style = {reportStyles.container}>
            <View style = {reportStyles.card}>
                <Text>Report</Text>
                <Text>{textval}</Text>
                <ReportReason/>
            </View>
        </SafeAreaView>
    );
};

的一部分

const ReportMension = ({mension}) => {

return(

TouchableOpacity style={postModalStyles.listButton} onPress={()=>{
console.log(mension)
navigation.navigate('Report', { title: mension.title });
}}>
            <Text style={postModalStyles.text}>report</Text>
        </TouchableOpacity>

);
}

。

Console.Log正常操作。 为什么我的组件和导航器无法传递参数（props）？ 使用堆栈Navigaor时如何通过道具？

Answer 1

首先，在报告中，您无法重新分配const变量。相反，尝试

    let textVal = '';
    if (route.params.title.length > 12) {
        textVal = route.params.title.substring(0,10) + '...';
    }
    else {
        textVal = route.params.title;
    }

或

const textVal = route.params.title.length > 12
  ? route.params.title.substring(0,10) + '...'
  : route.params.title;

第二，条件中有一个错别字：route.param.title.length应该是route> route.params.title.length。这会丢下错误，因为您无法在未定义的对象上访问属性length。

这两个语法错误应防止快速刷新工作，因为结果无法编译。如果您修复了这些问题，并console.log route在报告中的对象，则应获取所需的参数。