は内のコンポーネント間の通信ネイティブリアクト（子 - >親）

Question

を私はTabNavigatorコンテナでindex.ios.jsを参照するために、ファイル内artistPage.jsを必要としています。特に、ユーザーがページにいるときにTabBarを非表示にするスタイルを変更する必要がありますartistPage。

どうすればいいですか？何か案は？

Iは、小道具のスタイルを転送しようとしたが、読み取り専用モード（

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

'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

'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; 

ありがとう https://github.com/exponentjs/react-native-tab-navigator

let tabBarHeight = 0; 
<TabNavigator 
    tabBarStyle={{ height: tabBarHeight, overflow: 'hidden' }} 
    sceneStyle={{ paddingBottom: tabBarHeight }} 
/> 

しかし、私はartistPage.js

からアクセスする方法を理解していない：ここでは

はTabNavigatorコンテナを非表示にする方法です！

Answer 1

リアクションのデータフローは一方向です。実際には、あるコンポーネントが小道具を介して受け取るものを変更するには、小道具からの関数を介して親コンポーネントにコールバックする必要があるということです。

リアクションウェブサイトは、コンセプトにa nice introを持っています。

具体的にはtabBarVisibleの状態をMyAppに設定し、レンダリングの内側でタブバーに適用するスタイルを計算します。

MyAppもこの状態を変更するためのメソッドを持つことができます。

今

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

、あなたが小道具としてMyAppからArtistPageにhideTabBar関数を渡すと、それを呼び出すことができる、というArtistPageトグルをもらうためにのArtistPage、componentDidMountのように。