React Native 组件之间的通信(子 -> 父) [英] Communicate Between Components in React Native (child -> parent)

问题描述

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

I need inside the file artistPage.js to refer to the TabNavigator in index.ios.js. In particular, I need to change the styles to hide the TabBar when the user is on the page artistPage.

我该怎么做?有什么想法吗?

How can I do that? Any ideas?

我尝试在 props 中传输样式，但是有只读模式(

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;

这里是如何隐藏 TabNavigator:https://github.com/exponentjs/react-native-tab-navigator

Here is how to hide TabNavigator: https://github.com/exponentjs/react-native-tab-navigator

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

但我不明白如何从 artistPage.js

谢谢！

推荐答案

React 中的数据流是一种方式.这在实践中意味着，要更改某个组件通过 props 接收到的某些内容，它需要通过 props 中的函数回调到父组件中.

Data flow in React is one way. 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.

React 网站对这个概念有一个很好的介绍.

The React website has a nice intro to the concept.

在您的特定情况下，您可以在 MyApp 中有一个 tabBarVisible 状态，并在渲染中计算要应用于标签栏的样式.

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 也可以有一个方法来改变这个状态:

MyApp also can have a method to change this state:

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

现在，为了让 ArtistPage 切换，您可以将 hideTabBar 函数从 MyApp 传递到 ArtistPage> 作为道具，并在 ArtistPage 中调用它"noreferrer">生命周期钩子，如componentDidMount.

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.

这篇关于React Native 组件之间的通信(子 -> 父)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！