[英]Communicate Between Components in React Native (child -> parent)
I need inside the file artistPage.js to refer to the TabNavigator in index.ios.js . 我需要里面的文件artistPage.js指与TabNavigator在index.ios.js。 In particular, I need to change the styles to hide the TabBar when the user is on the page artistPage . 特别是,当用户在页面artistPage上时,我需要更改样式以隐藏TabBar。
How can I do that? 我怎样才能做到这一点? Any ideas? 有任何想法吗?
I tried to transfer styles in the props but there is the read-only mode( 我尝试在道具中传递样式但是有只读模式(
index.ios.js index.ios.js
'use strict'
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Image,
Text,
NavigatorIOS,
TouchableHighlight,
NavigationBar,
} from 'react-native';
import config from './config';
import ImagesList from './app/imagesList';
import TabNavigator from 'react-native-tab-navigator';
import Badge from './node_modules/react-native-tab-navigator/Badge'
class MyApp extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'images',
showTabBar: true
};
}
render() {
let tabBarStyle = {};
let sceneStyle = {};
if (this.state.showTabBar) {
tabBarStyle = styles.tabBar;
sceneStyle.paddingBottom = 54;
} else {
tabBarStyle.height = 0;
tabBarStyle.overflow = 'hidden';
sceneStyle.paddingBottom = 0;
}
return (
<View style={styles.container}>
<TabNavigator
tabBarStyle={ tabBarStyle }
sceneStyle={sceneStyle}
>
<TabNavigator.Item
titleStyle={styles.title}
selectedTitleStyle={styles.title_select}
selected={this.state.selectedTab === 'images'}
title="TATTOOS"
renderIcon={() => <Image source={require('./images/tabbar/tattoos_icon.png')} />}
renderSelectedIcon={() => <Image source={require('./images/tabbar/tattoos_icon_selected.png')} />}
onPress={() => this.setState({ selectedTab: 'images' })}>
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'MyApp',
component: ImagesList,
passProps: { showTabBar: true},
}}
navigationBarHidden={true}/>
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
imageList.js imageList.js
'use strict'
import React, { Component } from 'react';
import {
StyleSheet,
ListView,
View,
Text,
Image,
Dimensions,
ActivityIndicator,
TouchableHighlight,
RefreshControl
} from 'react-native';
import ArtistPage from './imageCard';
class ImagesList extends Component {
constructor(props) {
super(props);
this.state = {
};
}
_artistPage() {
this.props.navigator.push({
component: ArtistPage
});
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPress={this._artistPage()}
>
<Text>Got to Next Page</Text>
</TouchableHighlight>
</View>
);
}
}
}
module.exports = ImagesList;
artistPage.js artistPage.js
'use strict'
import React, { Component } from 'react';
import {
StyleSheet,
Text,
ListView,
View,
TouchableHighlight,
Image,
} from 'react-native';
class ArtistPage extends Component {
constructor(props) {
super(props);
this.state = {
};
}
_backTo() {
this.props.navigator.pop();
}
render() {
return (
<View>
<TouchableHighlight style={{marginTop: 100, marginLeft: 50}} onPress={() => this._backTo()} >
<Text>Back {this.props.showTabBar.toString()}</Text>
</TouchableHighlight>
</View>
);
}
}
module.exports = ArtistPage;
Here is how to hide TabNavigator: https://github.com/exponentjs/react-native-tab-navigator 以下是隐藏TabNavigator的方法: https : //github.com/exponentjs/react-native-tab-navigator
let tabBarHeight = 0;
<TabNavigator
tabBarStyle={{ height: tabBarHeight, overflow: 'hidden' }}
sceneStyle={{ paddingBottom: tabBarHeight }}
/>
But I don't understand how to access it from artistPage.js 但我不明白如何从artistPage.js访问它
Thank you! 谢谢!
Data flow in React is one way. React中的数据流是一种方式。 What it means in practice is that, to change something that a certain component receives via props, it will need to call back into the parent component, via a function from props. 在实践中它意味着,为了改变某个组件通过道具接收的东西,它需要通过道具的函数回调到父组件。
The React website has a nice intro to the concept. React网站有一个很好的介绍概念。
In your particular case, you could have a tabBarVisible
state in MyApp
, and inside render, compute the style to apply to the tab bar. 在您的特定情况下,您可以在MyApp
具有tabBarVisible
状态,并在内部渲染中计算要应用于选项卡栏的样式。
MyApp
also can have a method to change this state: MyApp
也可以有一个方法来改变这种状态:
hideTabBar() {
this.setState({ tabBarVisible: true });
}
Now, in order to let ArtistPage
toggle that, you can pass the hideTabBar
function from MyApp
to ArtistPage
as a prop, and call it in ArtistPage
in a lifecycle hook , like componentDidMount
. 现在,为了让ArtistPage
切换,你可以将hideTabBar
函数从MyApp
传递给ArtistPage
作为prop,并在生命周期钩子中的ArtistPage
中调用它,比如componentDidMount
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.