在React-Native Navigator中传递props / state
Passing props / state in React-Native Navigator
这里是React Native新手。
我试图建立一个简单的React Native应用程序的实践,本质上只是一个多页的联系形式。
当我通过导航器(navigatorRenderScene函数)渲染它们时,我很难找出将props/state传递给子组件的最佳方法
每当我尝试给我的组件分配props时,它允许我传递一个字符串,而不是一个函数或对象。例如,在组件首先,我试图传递一个字符串和一个函数。在页面呈现后,只有字符串将保留其值。
我这样做完全错了吗?我是否需要查看某种状态管理系统,如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);
这里有一个示例组件,First
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
我认为问题出在范围上。当将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)
}
让我知道这是否有效。好运!
相关文章:
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 如何从reactjs中的按钮向函数传递props
- 在$state.go之后执行$window.location.reload(true)
- 使用Angularjs$state.go导航
- 如何删除'被按压'state from复选框
- 将Json解析为State
- React.cloneElement:传递新的孩子或复制props.children
- 正在获取props值的子字符串-React
- $state没有'导航不正确
- 从ReactJS中的amplificPopup访问@props
- Angular State Dropdown Bound to Country Select
- 将$scope数据传递给$stateProvider.state解析
- $state.go没有兑现承诺
- AJAX 请求没有在我的 React 组件中设置 this.state.data
- nextProps 总是与 this.props 相同,即使 props 在 componentWillReceiveP
- This.props.dispatch not a function - React-Redux
- 离子范围值未更新 在$state之间导航
- 在 React 中嵌套组件,props 不会传递给子组件
- 在React-Native Navigator中传递props / state
- react.js中props和state的混淆