Question

是否可以根据React Navigation，

中按下的按钮来处理下一个屏幕值

我搜索任何可能的重复问题，比如我有，但花了几个小时还没找到。

假设我有这样的代码：

import React from 'react';
import { Button, View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
        <Button
          title="Go to Details 2"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    console.log("Button pressed on Homescreen is " + Button)
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen With Button Go To Details Or Details 2</Text>
      </View>
    );
  }
}

const RootStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

我的目标是Detail屏幕知道按钮Go To Details或Go To Details 2是否被按下的方式？

Answer 1

在导航时将值发送到导航器详细信息页面

点击第一个按钮：

 <Button
     title="Go to Details"
     onPress={() => this.props.navigation.navigate('Details', { title: 'Details 1'})}/>

点击第二个按钮：

 <Button
     title="Go to Details"
     onPress={() => this.props.navigation.navigate('Details', { title: 'Details 2'})}/>

然后在'详细信息屏幕'上：访问该值：{this.props.navigation.state.params.title}

所以最终的代码将是这样的：

class DetailsScreen extends React.Component {
  render() {
    console.log("Button pressed on Homescreen is " +{this.props.navigation.state.params.title})
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Button Pressed : {this.props.navigation.state.params.title}</Text>
      </View>
    );
  }
}

希望这会奏效。

反应导航 - 在导航同一屏幕时，处理两个按钮以传递不同的参数

1 个答案: