无法从 navigation.navigate 读取参数

Question

我正在构建一个应用程序来检测传感器并自动向用户显示有关传感器的信息。

所以我创建了一个主页，只有一个选项卡来显示一个标签，上面写着“检测”，当系统检测到传感器时，会打开一个新页面，其中包含三个选项卡，其中包含有关传感器的信息。

但是我遇到了一些困难，因为我无法将传感器 ID 传递到第二页。我想知道我做错了什么，为什么 Props.params 未定义。

我正在尝试做类似的事情：

主页选项卡导航器：

  render() {
    return (
      <NavigationContainer independent={true} >
        <Tab.Navigator>
          <Tab.Screen
            name="Detection"
            component={DetectScreen}
            options={{
              tabBarLabel: 'Detect',
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons name="motion-sensor" color={color} size={size} />
              ),
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }

function DetectScreen() {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator initialRouteName='Detect' screenOptions={{ headerShown: false }}>
      <Stack.Screen name='Detect' component={DetectionScreen} />
      <Stack.Screen name='Sensor' component={SensorScreen} />
    </Stack.Navigator>
  );
}

function DetectionScreen({ navigation }) {
  return (
    <SafeAreaView>
      <LinearGradient
        colors={['#000000', '#FFFFFF']}
        style={styles.main_container}>
        <SafeAreaView>
          <Detect navigation={navigation} />
        </SafeAreaView>
      </LinearGradient>
    </SafeAreaView>)
}

function SensorScreen({ navigation }) {
  return (
    <SafeAreaView>
      <LinearGradient
        colors={['#000000', '#FFFFFF']}
        style={styles.main_container}>
        <SafeAreaView style={styles.main_subcontainer}>
          <Sensor navigation={navigation}/>
        </SafeAreaView>
      </LinearGradient>
    </SafeAreaView>)
}

检测class

export class Detect extends Component {
    constructor(props) {
        super(props);
        startDetecting()
    }
    
    startDetecting(){
        this.props.navigation.navigate("Sensor", {
            params:{
              sensorId: 123
           }
        })
    }
}

检测到传感器时打开屏幕

const Stack = createStackNavigator();
const Tab = createMaterialTopTabNavigator();

function TabStack() {
  return (
    <Tab.Navigator
      initialRouteName="Configurations"
      >
      <Tab.Screen
        name="FirstScreen"
        component={FirstScreen}
        options={{
          tabBarLabel: 'First'
        }} />
      <Tab.Screen
        name="SecondScreen"
        component={SecondScreen}
        options={{
          tabBarLabel: 'Second'
        }} />
      <Tab.Screen
        name="ThirdScreen"
        component={ThirdScreen}
        options={{
          tabBarLabel: 'Third'
        }} />
    </Tab.Navigator>
  );
}

export class Sensor extends Component {
  constructor(props) {
    super(props);
    console.log(props.params) //props.params is Undefined
  }
  render() {
    return (
      <NavigationContainer
        independent={true}
      >
        <Stack.Navigator
          initialRouteName="Sensor"
          screenOptions={{
            headerShown: false
          }}>
          <Stack.Screen
            name="TabStack"
            component={TabStack}
            options={{ title: 'Tab Stack' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

Answer 1

为DetectionScreen函数添加路由参数
通过route.params.sensorId
然后您可以将此值传递给检测组件
使用 this.props.sensordId

下面的代码

function DetectionScreen({ navigation,route }) {
return (
<SafeAreaView>
  <LinearGradient
    colors={['#000000', '#FFFFFF']}
    style={styles.main_container}>
    <SafeAreaView>
      <Detect sensorId={route.params.sensorId} />
    </SafeAreaView>
  </LinearGradient>
</SafeAreaView>)
}

如此处所述https://reactnavigation.org/docs/params/

无法从 navigation.navigate 读取参数

Can't read params from navigation.navigate

react-native

react-native-navigation

stack-navigator