在 React-Native Navigator 中传递道具/状态

Question

React Native 新手在这里。

我正在尝试构建一个简单的 React Native 应用程序用于练习，它本质上只是一个多页联系表单。

当我通过导航器（navigatorRenderScene 函数）渲染子组件时，我无法找出将道具/状态传递给子组件的最佳方式

每当我在这里尝试为我的组件分配道具时，它允许我传递一个字符串，但不能传递一个函数或对象。例如在组件中首先，我试图传递一个字符串和一个函数。一旦页面被渲染，只有字符串会保持它的值。

我这样做完全错误吗？我是否需要研究某种状态管理系统，例如 Flux 或 Redux？甚至可能是 redux 路由器包？ （说实话还没有碰过这些）

路由一切正常，只是我无法弄清楚的道具/状态。

这是我的索引

import React, { Component } from 'react';
import {
  AppRegistry,
  Navigator,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

import { Container, Header, Title, Content, List, ListItem, InputGroup, Input, Button, Icon, Picker } from 'native-base'

// a bunch of crap here being imported that I don't need, I'll trim it down later.

import First from './components/First'
import Second from './components/Second'

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text : 'initial state',
      sentBy : '',
      company : '',
      phoneNumber : ''
    };
    this.testFunc = this.testFunc.bind(this)
  }
  // end constructor

  mostRecentPush() {
    // firebase stuff, not really important to the problem
    console.log('pushing input data to DB')
    firebase.database().ref('mostRecent/').set({
      'body' : this.state.text,
      'sentBy' : this.state.sentBy,
      'location' : this.state.pickerValue,
      'company' : this.state.company
    });

    firebase.database().ref('emails/').push({
      'body' : this.state.text,
      'sentBy' : this.state.sentBy,
      'location' : this.state.pickerValue,
      'company' : this.state.company
    })
  }
  // end mostRecentPush() / firebase stuff

  onButtonPress() {
    this.props.navigator.push({
      id: 'Second'
    })
  } // end onButtonPress

  testFunc() {
    console.log('calling this from the index')
  }

  render() {
    console.log('rendering home')
    return (
        <Navigator
          initialRoute = {{
            id: 'First'
          }}
          renderScene={
            this.navigatorRenderScene
          }
         />
      )
  } // end render

  navigatorRenderScene(route, navigator) {
    _navigator = navigator;  
    switch (route.id){
      case 'First':
        return(<First testString="cat123" testFunc={this.testFunc} navigator={navigator} title="First" />)
        // passing our navigator value as props so that the component has access to it
      case 'Second':
        return(<Second navigator={navigator} title="Second" />)
      case 'Third':
        return(<Third navigator={navigator} title="Third" />)
      case 'Fourth':
        return(<Fourth navigator={navigator} title="Fourth" />)
      case 'Fifth':
        return(<Fifth navigator={navigator} title="Fifth" />)
    } //end switch
  } // end navigatorRenderScene
} // end component

AppRegistry.registerComponent('App', () => App);

这是一个示例组件，首先

import React, { Component } from 'react';
import {
  AppRegistry,
  Navigator,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

import { Container, Header, Title, Content, List, ListItem, InputGroup, Input, Button, Icon, Picker } from 'native-base'

// too much stuff being imported, will clean this up later

class First extends Component {

  constructor(props) {
    super(props)
    this.onButtonPress = this.onButtonPress.bind(this)
  }

  onButtonPress() {
    this.setState({
      text: 'changed state from first component'
    })

    console.log(this.state)

    this.props.navigator.push({
      id: 'Second'
    })
  }

  render() {
    return(
        <Container>
         {console.log('rendering first')}
            <Content>
                <List>
                    <ListItem>
                        <InputGroup>
                            <Input 
                              placeholder='Name' 
                            />
                        </InputGroup>
                    </ListItem>
               </List>
                <TouchableHighlight onPress={this.onButtonPress}>
                  <Text>Go to Page 2</Text>
                </TouchableHighlight>
            </Content>
        </Container>
      )
  }
}


export default First

Answer 1

我认为问题出在范围上。将 renderScene 属性设置为导航器时，您并没有将该函数绑定到实际类，因此当 navigatorRenderScene 被执行时，它的作用域与 testFunc 不同。

尝试更改这行代码：

navigatorRenderScene(route, navigator) {
  //...
}

为此：

navigatorRenderScene = (route, navigator) => {
  // ...
}

箭头函数会将navigatorRenderScene 绑定到类，因此this.testFunc 将存在于那里。

其他绑定选项

如果您不想使用箭头功能，可以在constructor 中尝试类似的操作。

// First options
this.navigatorRenderScene = this.navigatorRenderScene.bind(this)

或者你也可以直接在回调上使用bind方法

// Second option
renderScene={
  this.navigatorRenderScene.bind(this)
}

或者箭头函数

// Third option
renderScene={
  (route, navigator) => this.navigatorRenderScene(route, navigator)
}

让我知道这是否有效。祝你好运！