在React Native中的组件之间进行通信（子级 – >父级）

我需要在文件artistPage.js中引用index.ios.js中的TabNavigator 。 特别是，当用户在页面artistPage上时，我需要更改样式以隐藏TabBar。

我怎样才能做到这一点？ 有任何想法吗？

我试图在道具中传递样式但是有只读模式（

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 (    } renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: 'images' })}>     ); } } AppRegistry.registerComponent('MyApp', () => MyApp); 

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 (   Got to Next Page   ); } } } module.exports = ImagesList; 

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 (   this._backTo()} > Back {this.props.showTabBar.toString()}   ); } } module.exports = ArtistPage; 

以下是隐藏TabNavigator的方法： https ： //github.com/exponentjs/react-native-tab-navigator

 let tabBarHeight = 0;  

但我不明白如何从artistPage.js访问它

谢谢！

Answer 1

React中的数据流是一种方式。 在实践中它意味着，为了改变某个组件通过道具接收的东西，它需要通过道具的函数回调到父组件。

React网站有一个很好的概念介绍 。

在您的特定情况下，您可以在MyApp具有tabBarVisible状态，并在内部渲染中计算要应用于选项卡栏的样式。

MyApp也可以有一个方法来改变这种状态：

 hideTabBar() { this.setState({ tabBarVisible: true }); } 

现在，为了让ArtistPage切换，你可以将hideTabBar函数从MyApp传递给ArtistPage作为prop，并在生命周期钩子 （如componentDidMount中的ArtistPage中调用它。