通信的組件之間的陣營原生（孩子 - >父母）

Question

我需要的文件artistPage.js來指代TabNavigator的在index.ios.js內。特別是，當用戶在頁面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 (
     <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; 

下面是如何隱藏TabNavigator的：https://github.com/exponentjs/react-native-tab-navigator

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

但我不明白如何從artistPage.js

感謝您訪問！

Answer 1

React中的數據流是一種方式。實際上它的意思是，要改變某個組件通過道具接收到的東西，它需要通過道具的函數回調到父組件中。

React網站有a nice intro這個概念。

在您的特定情況下，您可以在MyApp中使用tabBarVisible狀態，並在渲染中計算應用於選項卡欄的樣式。

MyApp也可以改變這種狀態的方法：

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

現在，爲了讓ArtistPage切換，你可以通過從MyApp的hideTabBar功能ArtistPage爲道具，並調用它ArtistPage在lifecycle hook，如componentDidMount。