[英]React-native: Binding scene to NavigationBar
I'm putting together this Ask/Answer App, and came across this hurdle: 我正在整理这个Ask / Answer应用程序,并遇到了这个障碍:
I want to trigger a function in a scene from the navigationBar. 我想从navigationBar触发场景中的一个函数。 Similar to a Login app I have a button in the NavigationBar to Submit an answer:
与登录应用程序类似,我在NavigationBar中有一个按钮来提交答案:
RightButton(route, navigator, index, navState) {
if (route.name=='TextInputView'){
return <TouchableHighlight
underlayColor="transparent"
style={{ marginRight:13, marginTop:0}}
onPress={() => this.refs.TextInputView.submitSolution()}>
<Text style={ styles.leftNavButtonText }>Done</Text>
</TouchableHighlight>
}
the renderscene(route,navigator) looks like so: renderscene(route,navigator)看起来像这样:
if (route.name == 'TextInputView'){
return <TextInputView ref="TextInputView" navigator={navigator} {...route.passProps}/>
}
and of course in the "TextInputView" component I have a "submitSolution" function... 当然在“TextInputView”组件中我有一个“submitSolution”函数......
problem is if I'm in the scene and press the "Done" - I always get: "undefined is not an object (evaluating '_this2.refs.TextInputView') 问题是如果我在场景中并按下“完成” - 我总是得到:“undefined不是一个对象(评估'_this2.refs.TextInputView')
as always: thanks for your help 一如既往:感谢您的帮助
Well, you can do it by keeping everything related to the submission in the scene itself. 好吧,你可以通过在场景中保留与提交相关的所有内容来实现。
How? 怎么样?
You do it by injecting a button in the navbar on-demand. 您可以通过按需在导航栏中注入按钮来完成此操作。
Here's a solution I created for a project I'm working on: https://rnplay.org/apps/dS31zw 这是我为我正在开发的项目创建的解决方案: https : //rnplay.org/apps/dS31zw
The idea is to supply the navbar route with an object that has a label and a function (and whatever you like.. eg icons.) 我们的想法是为navbar路由提供一个具有标签和功能的对象(以及任何你喜欢的东西......例如图标。)
As a bonus, you can inject the title too! 作为奖励,你也可以注入标题!
Note: this trick depends on componentWillMount() being invoked before NavigationBarRouteMapper does it work. 注意:这个技巧取决于在NavigationBarRouteMapper工作之前调用的componentWillMount()。 If this change in the future, it will definitely break it.
如果将来这种变化,它肯定会打破它。 But it works flawlessly now!
但它现在完美无瑕!
'use strict';
import React, {Component} from 'react';
import ReactNative from 'react-native';
const {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
Alert,
TouchableHighlight
} = ReactNative;
class Home extends Component {
//This trick depends on that componentWillMount fires before the navbar is created
componentWillMount() {
this.props.route.navbarTitle = "Home";
this.props.route.rightNavButton = {
text: "Button",
onPress: this._doSomething.bind(this)
};
}
_doSomething() {
Alert.alert(
'Awesome, eh?',
null,
[
{text: 'Indeed'},
]
)
}
render() {
return (
<View style={styles.container}>
<Text>You are home</Text>
</View>
);
}
}
class AppContainer extends Component {
renderScene(route, navigator) {
switch(route.name) {
case "Home":
//You must pass route as a prop for this trick to work properly
return <Home route={route} navigator={navigator} {...route.passProps} />
default:
return (
<Text route={route}
style={styles.container}>
Your route name is probably incorrect {JSON.stringify(route)}
</Text>
);
}
}
render() {
return (
<Navigator
navigationBar={
<Navigator.NavigationBar
style={ styles.navbar }
routeMapper={ NavigationBarRouteMapper } />
}
initialRoute={{ name: 'Home' }}
renderScene={ this.renderScene }
/>
);
}
}
//Nothing fancy here, except for checking for injected buttons.
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if(route.leftNavButton) {
return (
<TouchableHighlight
style={styles.leftNavButton}
underlayColor="transparent"
onPress={route.leftNavButton.onPress}>
<Text style={styles.navbarButtonText}>{route.leftNavButton.text}</Text>
</TouchableHighlight>
);
}
else if(route.enableBackButton) {
return (
<TouchableHighlight
style={styles.leftNavButton}
underlayColor="transparent"
onPress={() => navigator.pop() }>
<Text style={styles.navbarButtonText}>Back</Text>
</TouchableHighlight>
);
}
},
RightButton(route, navigator, index, navState) {
if(route.rightNavButton) {
return (
<TouchableHighlight
style={styles.rightNavButton}
underlayColor="transparent"
onPress={route.rightNavButton.onPress}>
<Text style={styles.navbarButtonText}>{route.rightNavButton.text}</Text>
</TouchableHighlight>
);
}
},
Title(route, navigator, index, navState) {
return (<Text style={styles.navbarTitle}>{route.navbarTitle || route.name}</Text>);
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 66
},
navbar: {
backgroundColor: '#ffffff',
},
navbarTitle: {
marginVertical: 10,
fontSize: 17
},
leftNavButton: {
marginVertical: 10,
paddingLeft: 8,
},
rightNavButton: {
marginVertical: 10,
paddingRight: 8,
},
navbarButtonText: {
fontSize: 17,
color: "#007AFF"
}
});
AppRegistry.registerComponent('AppContainer', () => AppContainer);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.