如何将参数从屏幕发送到堆栈导航器

Question

我是本地反应的新手。我在选项卡导航器中使用堆栈导航器;我必须在每个选项卡中导航多个屏幕。 我能够将参数从默认类主页发送到我的选项卡和堆栈导航器中的嵌套类。

export const MyApp = TabNavigator({
Asset: {
screen: AssetScreen,
},
Sensors: {
screen: sensorsStack,
},
Settings: {
    screen: settingStack
 },
}
export const sensorsStack = StackNavigator({
sensors : { screen: SensorScreen },
sensorDetails : { screen: SensorDetails }
});
export const settingStack = StackNavigator({
 settings: { screen: SettingsScreen },
 about : { screen: About },
 environment : { screen: Environment }
});
export default class HomePage extends Component {
constructor(props) {
  super(props);
  this.state = {
   assetID:'xyz',
   authToken:'xyzz'
  }
}
static navigationOptions = {
  header: null
};
render() {
    const screenProps = {
        asset: {
            assetID: this.state.assetID,
            authToken : this.state.authToken,
        },
    }
    return (
        <MyApp screenProps={screenProps} />
    );
}
}

现在，我想将一个参数从"传感器屏幕"发送到"传感器详细信息"。我尝试使用

 NavigationActions.navigate({ routeName: 'sensorDetails' ,params: { sensorType:'Fuel',}});

来自"传感器屏幕"类。但无法在"传感器详细信息"类中获取参数。如何传递此参数？

Answer 1

回答有点晚，但可能会帮助其他人，最终会在这里。与其使用导航操作，不如尝试从传感器屏幕导航到传感器详细信息，并导航并传递一些额外的变量。

this.props.navigation.navigate('SensorDetails',{sensorType:'Fuel'})

然后，可以在第二个屏幕中读取传递的对象

this.props.navigation.state.params.sensorType

在这些

行中可以看到这种情况的最小示例。请注意，这是图标标签栏上的愚蠢。但它保持这种方式，因为问题是关于每个选项卡上都有堆栈的标签栏。并且可以轻松添加新选项卡。

import React,{Component} from 'react'
import { Text, View, Footer,Button } from 'react-native'
import {StackNavigator,TabNavigator} from 'react-navigation'
export class SensorScreen extends React.Component {
  render() {
    return (<Button
              onPress={() => this.props.navigation.navigate('SensorDetails',{sensorType:'Fuel'})}
              title="Go to Sensor Details"
            />)}}
export class SensorDetails extends React.Component {
  render() {
    return (<View>
              <Text>{this.props.navigation.state.params.sensorType}</Text>
            </View>);}
  }
const sensorsStack = StackNavigator({
  sensors : { screen: SensorScreen },
  SensorDetails : { screen: SensorDetails }
});
const MyApp = TabNavigator({
  Sensors: {
    screen: sensorsStack,
  },
});
export default class Nested extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
        <MyApp/>
    );
}
}

希望这有帮助。