反应本机路由器通量。如何以编程方式更改自定义导航栏?
react-native-router-flux. How to change custom navBar programmatically?
我的场景中有一个自定义导航栏:
<Scene key="myPage"
component={MyPage}
navBar={NavBarCustom}
hideNavBar={false}/>
.....
class NavBarCustom extends Component {
constructor(props) {
super(props);
}
onExitPressed(){
App.exit();
}
render() {
return (
<View style={styles.navBar}>
<View style={styles.leftContainer}>
<Image
style={styles.logo}
source={require('./../../res/ic_nav_bar.png')}/>
<Text style={[appStyles.customFontBold, styles.title1]}>
MY TITLE
</Text>
</View>
<View style={styles.centralContainer}>
<Text style={[appStyles.customFontRegular, styles.title2]}>
{strings.benefit_identifier}
</Text>
</View>
<View style={styles.rightButtonContainer}>
<TouchableHighlight
style={{padding: 7}}
underlayColor='#b59d6e'
onPress={() => { this.onExitPressed() }}>
<Text style={[appStyles.customFontRegular, styles.rightButtonTitle]}>
{strings.exit}
</Text>
</TouchableHighlight>
</View>
</View>
);
}
}
效果不错。那么如何从我的场景 MyPage?
中更改 NavBarCustom 的 title1
提前致谢。
场景采用标题参数
<Scene
key="myPage"
component={MyPage}
navBar={NavBarCustom}
hideNavBar={false}
title="myPage"
/>
您可以pass/send信息through/withprops
:
在您的渲染中,您可以声明一个 const
,它采用 react-native-router-flux
Actions
,设置要指向的路线,然后设置要通过的 object:
如果有一个登录主文件,然后重定向到注册视图,那么您声明 const
goToRegister
然后传递 text
及其内容:
class Login extends Component {
render() {
const goToRegister = () => Actions.Register({text: 'From Login'});
return(
<View style={{flex:1}}>
<Text>
Login
</Text>
<TouchableHighlight onPress={goToRegister} style={{ marginTop: 100}}>
<Text>Go Register</Text>
</TouchableHighlight>
</View>
)
}
}
然后在您的注册表中,您会在 props
中收到它作为 this.props.text
:
class Register extends Component {
render() {
return(
<View style={{flex:1}}>
<TouchableHighlight onPress={Actions.Login} style={{ marginTop: 100}}>
<Text>{ this.props.text }</Text>
</TouchableHighlight>
</View>
)
}
}
在您的情况下,您应该首先发送标题的值,例如:
render() {
const goToMyPage = () => Actions.MyPage({ title: 'Some Title'})
...
然后你就可以使用它了:
<Text style={[appStyles.customFontBold, styles.title1]}>
{ this.props.title }
</Text>
我的场景中有一个自定义导航栏:
<Scene key="myPage"
component={MyPage}
navBar={NavBarCustom}
hideNavBar={false}/>
.....
class NavBarCustom extends Component {
constructor(props) {
super(props);
}
onExitPressed(){
App.exit();
}
render() {
return (
<View style={styles.navBar}>
<View style={styles.leftContainer}>
<Image
style={styles.logo}
source={require('./../../res/ic_nav_bar.png')}/>
<Text style={[appStyles.customFontBold, styles.title1]}>
MY TITLE
</Text>
</View>
<View style={styles.centralContainer}>
<Text style={[appStyles.customFontRegular, styles.title2]}>
{strings.benefit_identifier}
</Text>
</View>
<View style={styles.rightButtonContainer}>
<TouchableHighlight
style={{padding: 7}}
underlayColor='#b59d6e'
onPress={() => { this.onExitPressed() }}>
<Text style={[appStyles.customFontRegular, styles.rightButtonTitle]}>
{strings.exit}
</Text>
</TouchableHighlight>
</View>
</View>
);
}
}
效果不错。那么如何从我的场景 MyPage?
中更改 NavBarCustom 的 title1提前致谢。
场景采用标题参数
<Scene
key="myPage"
component={MyPage}
navBar={NavBarCustom}
hideNavBar={false}
title="myPage"
/>
您可以pass/send信息through/withprops
:
在您的渲染中,您可以声明一个 const
,它采用 react-native-router-flux
Actions
,设置要指向的路线,然后设置要通过的 object:
如果有一个登录主文件,然后重定向到注册视图,那么您声明 const
goToRegister
然后传递 text
及其内容:
class Login extends Component {
render() {
const goToRegister = () => Actions.Register({text: 'From Login'});
return(
<View style={{flex:1}}>
<Text>
Login
</Text>
<TouchableHighlight onPress={goToRegister} style={{ marginTop: 100}}>
<Text>Go Register</Text>
</TouchableHighlight>
</View>
)
}
}
然后在您的注册表中,您会在 props
中收到它作为 this.props.text
:
class Register extends Component {
render() {
return(
<View style={{flex:1}}>
<TouchableHighlight onPress={Actions.Login} style={{ marginTop: 100}}>
<Text>{ this.props.text }</Text>
</TouchableHighlight>
</View>
)
}
}
在您的情况下,您应该首先发送标题的值,例如:
render() {
const goToMyPage = () => Actions.MyPage({ title: 'Some Title'})
...
然后你就可以使用它了:
<Text style={[appStyles.customFontBold, styles.title1]}>
{ this.props.title }
</Text>