Question

我有一个名为Root的主屏幕组件

  export default class Root extends Component {

  constructor(props) {
    super(props);
    this.state = {
      temp: 0,
      weather: "Default"
    }
  }

render() {
    return(
        <Icon
          style={styles.settings}
          name="md-more"
          color="white"
          size={30}
          type="ionicon"
          underlayColor={weather[this.state.weather].BackgroundColor}
          onPress={() => this.props.navigation.navigate("Settings", {weather:this.state.weather})}
          /> // tried passing props down here, but don't know how
);

}

Root的状态包含温度和天气字段，我想访问我拥有的另一个组件weather中的Settings（对于此应用程序的“设置”页面）

class Settings extends Component {

static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: weather[this.state.weather].BackgroundColor // this part
    }
  };

我想访问weather的{{1}}部分的“设置”中的backgroundColor字段（使用反应导航）。我在其他帖子中听说过传递道具来这样做，但似乎无法在这里工作。

此外，navigationOptions与Root的连接方式是通过图标按下（就像按钮一样），我将执行以下操作：Settings。所以我认为我无法通过“根”渲染“设置”，但是有没有办法在此处发送道具？

（例如，如果onPress={() => this.props.navigation.navigate("Settings")}，则this.state.weather = "Rain"将返回weather["Rain"].backgroundColor。）

Answer 1

尝试一下：

props.navigation.state.params.weather

而不是：

this.state.weather

代码：

static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: weather[props.navigation.state.params.weather].BackgroundColor // this part
    }
  };

从navigationOptions

1 个答案: