使用React-Native Navigation传递数据

问题描述 投票:9回答:6

我试图在我的应用程序中的屏幕之间传递数据。目前我正在使用

"react-native": "0.46.0",
"react-navigation": "^1.0.0-beta.11"

我有我的index.ios

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import App from './src/App'
import { StackNavigator } from 'react-navigation';
import SecondScreen from './src/SecondScreen'    

class med extends Component {
  static navigationOptions = {
    title: 'Home Screen',
  };

  render(){
    const { navigation } = this.props;

    return (
      <App navigation={ navigation }/>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: med },
  SecondScreen: { screen: SecondScreen, title: 'ss' },    
});

AppRegistry.registerComponent('med', () => SimpleApp);

应用为

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

const App = (props)  => {
  const { navigate } = props.navigation;

  return (
    <View>
      <Text>
        Welcome to React Native Navigation Sample!
      </Text>
      <Button
          onPress={() => navigate('SecondScreen', { user: 'Lucy' })}
          title="Go to Second Screen"
        />
    </View>
  );
}

export default App

然后秒屏

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

import { StackNavigator } from 'react-navigation';


const SecondScreen = (props)  => {
  const { navigate } = props.navigation;
  console.log("PROPS" + this.props.navigation.state);


  return (
    <View>
      <Text>
        HI
      </Text>

    </View>
  );
}

SecondScreen.navigationOptions = {
  title: 'Second Screen Title',
};

export default SecondScreen

每当我调试console.log时,我都会被定义。 https://reactnavigation.org/docs/navigators/navigation-prop文档说每个屏幕应该有这些价值我做错了什么?

javascript android ios reactjs react-native
6个回答
11
投票

在你的代码中,props.navigation和this.props.navigation.state是两个不同的东西。您应该在第二个屏幕中尝试这个:

const {state} = props.navigation;
console.log("PROPS " + state.params.user);

const {state}专线只是为了获得易于阅读的代码。


9
投票

头等舱

<Button onPress = {
  () => navigate("ScreenName", {name:'Jane'})
} />

二等

const {params} = this.props.navigation.state

5
投票

反应导航3. *

Parent Class

this.props.navigation.navigate('Child', {
    something: 'Some Value',
});

Child Class

this.props.navigation.state.params.something // outputs "Some Value"

4
投票

您可以使用相关组件(SecondScreen)中的user访问您的参数props.navigation.state.params.user


1
投票

从反应导航3.x qazxsw poi,你可以使用qazxsw poi。

docs

1
投票

我开发了一个NPM包,用于将数据从一个组件发送到其他组件。请检查并使用它易于使用。

getParam(params)

    class SecondScreen extends React.Component {
        render() {
          const { navigation } = this.props;
          const fname = navigation.getParam('user');
          return (
            <View>
              <Text>user: {JSON.stringify(fname)}</Text>
            </View>
          );
        }
    }

评论任何帮助。

© www.soinside.com 2019 - 2024. All rights reserved.