Question

我有一个封装三个组件的组件，其中一个是DrawerLayoutAndroid。现在，我想将抽屉的引用从抽屉组件传递到主组件，然后再将其传递到标题组件，以便可以从标题组件触发它。

我不知道该怎么做。

这是主要组件'cases.js'

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Header from '@components/header';
import BottomBar from '@components/bottom-bar';
import SideBar from '@components/drawer';

export default class Cases extends Component {

  state = {
    title : 'Cases'
  }

  change_text = () => {

    this.setState({ title : 'Test' })

  }

  open_drawer = (ref) => {

    ref.openDrawer();

  }

  close_drawer = (ref) => {

    ref.closeDrawer();

  }

  render() {

    return (

      <SideBar style={ styles.container }>

        <Header title={ this.state.title } change_text={ this.change_text } open={ this.state.side_bar } />

        <View style={ styles.body }>

          <Text style={ styles.text }> { this.state.name } </Text>

          <TouchableOpacity onPress={ () => this.change_text() } style={ styles.button }>

            <Text> Change State </Text>

          </TouchableOpacity>

        </View>

        <BottomBar ref={ this.state.side_bar } />

      </SideBar>

    )

  }

}

const styles = StyleSheet.create({
  container : {
    flex : 1,
    flexDirection: 'column',
  },
  body : {
    flex : 1,
    backgroundColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text : {
    color : '#fff'
  },
  button : {
    backgroundColor : '#eee',
    paddingVertical: 5,
    paddingHorizontal: 10
  }
})

这是我的标题：

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
import LinearGradient from 'react-native-linear-gradient';

export default class Header extends Component {

  change_text = () => {

    this.props.change_text();

  }

  open = ()

  render () {

    return (

      <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#a4d294', '#3ac6f3']} style={ styles.header }>

          <TouchableOpacity onPress={ () => this.props.change_text() }>

            <Image source={ require('@media/images/add.png') } style={ styles.add_button } />

          </TouchableOpacity>

          <Text style={ styles.title }> { this.props.title } </Text>

          <TouchableOpacity onPress={ () => this.props.open() }>

            <Image source={ require('@media/images/more.png') } style={ styles.more_button } />

          </TouchableOpacity>

      </LinearGradient>

    )

  }

}

const styles = StyleSheet.create({
  header : {
    height: 70,
    backgroundColor: '#eee',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  title : {
    color : '#fff',
    textAlign: 'center',
    fontSize: 20,
    letterSpacing: 3
  },
  add_button : {
    width: 30,
    height: 30,
    marginHorizontal: 10
  },
  more_button : {
    width: 30,
    height: 30,
    marginHorizontal: 10
  }
})

这是我的drawer.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
import LinearGradient from 'react-native-linear-gradient';

export default class Drawer extends Component {

  render () {

    const NavigationMenu = (
      <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['#a4d294', '#3ac6f3']} style={{ flex: 1 }}>
        <View style={{ flex : 6, justifyContent: 'center' }}>
          <Text>He There</Text>
        </View>
      </LinearGradient>
    )

    return (

      <DrawerLayoutAndroid
        drawerWidth={250}
        drawerPosition={ DrawerLayoutAndroid.positions.Right }
        renderNavigationView={ () => NavigationMenu }
        ref={ (drawer) => this.props.ref = drawer }
      >

        { this.props.children }

      </DrawerLayoutAndroid>

    )

  }

}

Answer 1

我将通过一个简单的例子来回答您的问题。让我们采取父子两部分。您希望在父级中向子级传递一些消息，并在子级中发生事件时从子级中回叫到父级。

export default class Parent extends React.Component<any, any> {

  callback (paramFromChild) => {
    // implement what to do when certain event occurs in child component
  }

  render () {
    <View>
       <Child message={"some text"} callbackFromChild={this.callback}/>
    </View>
  }
}

子组件

Interface childProps {
   message: string

   callbackFromChild(paramFromChild);
}

export default class Child extends React.Component<childProps, any> {

  render () {
    <View>
       <Button title={this.props.message} onPress={this.props.callbackFromChild("some message from child")}/>
    </View>
  }
}

通过这种方式，您可以使用道具在不同组件之间进行通信。

在React Native中的两个组件之间传递数据

1 个答案: