Question

在这里反应原生新手。

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

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

每当我尝试在这里为我的组件分配道具时，它允许我传递字符串但不传递函数或对象。例如，在组件First中，我正在尝试传递字符串和函数。一旦呈现页面，只有字符串将保持其值。

我这样做完全是错误的吗？我是否需要研究某种状态管理系统，如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 prop设置为导航器时，您不会将该函数绑定到实际的类，因此当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)
}

如果有效，请告诉我。祝你好运！

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

1 个答案: