Question

我尝试在stacknavigator上传递道具，这里是我的代码

const MainCart = StackNavigator({
  Cart: {
    screen: CartScreen
  },
  Checkout: {
    screen: COScreen
  }

  /* how to pass 'myprops' in this area? */

});


export default class ReactNative_RefreshControl extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    console.log('ReactNative_RefreshControl this.props.myparam : ' + this.props.myparam);
    return <MainCart myprops = {
      this.props.myparam
    }
    />;

    //https://reactnavigation.org/docs/navigators/stack#Navigator-Props
  }


}

如何在StackNavigator区域传递'myprops'？

感谢

Answer 1

如果你想在那个地方传递道具，你可以像这样使用它。

{{1}}

如果你想在Sagar Chavada导航解决方案时传递道具很有用

Answer 2

点击事件中的

是这样的：

const array1 = [1, 2, 3, 4, 5];
const array2 = ['A', 'B', 'C', 'D', 'E'];
const resultMap = array1.reduce(
  (accumulator, value, index) => Object.assign(accumulator, {
    [value]: array2[index],
  }), {}
);

console.log(resultMap);

在其他屏幕中你可以像这样设置：

    onPressed(movie){
        this.props.navigation.navigate(
          'screen',
          {movie: movie}
        });
      }

<TouchableHighlight onPress={() => this.onPressed(movie)}>

电影是一个json对象，包含标题，年份，发布日期，收入，海报等。

这个用于旧导航：

export default class NavigateTo extends Component {
  constructor(props){
    super(props);

    this.state = {
        name: this.props.navigation.state.params.movie.title,
        year: this.props.navigation.state.params.movie.year
    }
  }

并在第二个屏幕中：

onPressed(movie){
    this.props.navigator.push({
      id:'page2',
      movie: movie
    });
  }

现在您可以看到差异

如果这不起作用，请尝试这样

this.state = {
        name: this.props.movie.title,
        email: this.props.movie.year
    }

检查这是否嵌套堆栈导航 https://github.com/react-community/react-navigation/issues/143

Answer 3

对于那些正在寻找React Navigation 5的人

<Stack.Navigator initialRouteName="LoginScreen" headerMode="none">
 <Stack.Screen name="LoginScreen" component={LoginScreen} initialParams={{'key':'value'}} />
 <Stack.Screen name="CodeVerificationScreen" component={CodeVerificationScreen} initialParams={{'key':'value'}} />
</Stack.Navigator>

您可以在login.js中收到初始参数

console.log(this.props.route.params.key)

Answer 4

在我的情况下，我想传递一个函数来显示每个组件的吐司面包，最后我通过使用screenProps并覆盖每个组件来实现它：

export default class App extends React.Component {
  constructor(props) {
  super(props);
}

showToast = (text) => {
  this.refs.toast.show(text, DURATION.FOREVER);
};

render() {
  return <Provider store={store}>
    <View style={styles.wrapper}>[
      <MyAppNavigator showToast={this.showToast}/>,
      <Toast ref="toast"/>
      ]
    </View>
  </Provider>;
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  }
});


const createNavigator = (screenProps) => {
  const toastWrapper = (Component, props, screenProps) => {
    return <Component {...props} screenProps={screenProps}/>
  };
  return createStackNavigator({
    login: {
      screen: props => toastWrapper(LoginView, props, screenProps),
      navigationOptions: () => {
        return {header: null}
      }
    },
    map: {
      screen: props => toastWrapper(FieldMap, props, screenProps),
      navigationOptions: () => ({
        title: 'Map'
      })
    }
  })
};

const MyAppNavigator = (props) => {
  const AppNavigator = createNavigator(props);
  return <AppNavigator/>
};

然后从我的组件中获取

：

this.props.screenProps.showToast("Logging you in");

Answer 5

让我们假设您想通过导航的道具传递参数 myTheme 。在 React Navigation 5 上，您可以这样做

...    
const myTheme = {...}
 return(
        <ProfileStack.Navigator initialRouteName='ProfileWithSettings'>
           <ProfileStack.Screen name={'ProfileWithSettings'}>
                {props => <ProfileWithSettings {...props} theme={myTheme}/>}
           </ProfileStack.Screen>
        <ProfileStack.Navigator/>
    );

在ProfileWithSettings组件上，您可以按以下方式引用myTheme：

this.props.theme

Answer 6

我需要将道具从主要组件发送到StackNavigator，然后传递到它的组件，我使用screenProps来做到这一点。

您的主要功能应如下所示：

render() {
    return <MainCart screenProps={this.props.params}
    />;
  }

之后，在导航器屏幕中，您可以像这样访问它：

this.props.screenProps.params

Answer 7

如果您尝试从导航视图访问应用程序级别，那么我的上一个答案仍然成立，但是，如果您只想更改标题或类似的内容，则不必将参数传递给导航器。

一点反应魔法：

export default class ReactNative_RefreshControl extends Component {

    constructor(props) {
        super(props)
    }
    //this function will override the navigation options specified in MainCart component
    static navigationOptions = ({navigation}) => {
        return {
            headerTitle: navigation.state.params.name,
            headerRight: <Button onPress={navigation.state.params.onClick}/>
            };
        };

        componentDidMount() {
            this.props.navigation.setParams({
                name: "name",
                onClick: this.onClick
            });
        }
...

Answer 8

用于在第5版反应导航

中将参数从一个 stackNavigator 的子代传递给另一个 stackNavigator 的子代。

CREATE TABLE [dbo].[Tickers](
    [Ticker] [nvarchar](8) NOT NULL,
    [Name] [nvarchar](50) NOT NULL,
    [Market] [int] NOT NULL,
    [Locale] [int] NOT NULL,
    [Type] [int] NOT NULL,
    [Active] [bit] NOT NULL,
    [PrimaryExch] [nvarchar](50) NOT NULL,
    [Updated] [datetime2](7) NOT NULL,
    [Currency] [int] NOT NULL,
CONSTRAINT [PK_Tickers] PRIMARY KEY CLUSTERED 
(
    [Ticker] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[AggregateDay](
    [Ticker] [nchar](8) NOT NULL,
    [Date] [date] NOT NULL,
    [Volume] [decimal](18, 0) NULL,
    [Open] [decimal](18, 0) NULL,
    [Close] [decimal](18, 0) NULL,
    [High] [decimal](18, 0) NULL,
    [Low] [decimal](18, 0) NULL,
    [Samples] [int] NULL,
 CONSTRAINT [PK_AggregateDay] PRIMARY KEY CLUSTERED 
(
    [Ticker] ASC,
    [Date] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

）; };

传递道具StackNavigator

8 个答案: