Question

import { copilot, walkthroughable, CopilotStep } from 'react-native-copilot';
 class DashboardContent extends Component {
  state ={
    secondStepActive: true
  };

  componentDidMount() {
    this.props.start()
    this.props.copilotEvents.on('stepChange', this.handleStepChange);
  
  }
  
  handleStepChange = step => {
    console.log(`Current step is: ${step.name}`);
  };
   
  render() {
    
    return (
      <View>  ......   <View/>
           
    );
  }
}

export default copilot({
  animated: true, 
  overlay: 'svg', 
})(DashboardContent);

我正在使用react-native-copilot库进行演练。我希望触发this.props.start（）函数，该函数使用我的NavBar组件中的按钮启动演练-下面代码中的_infoPage函数应该基本上触发该函数。

导航栏的代码是：

class NavBar extends Component {

    state ={
        isModalVisible: false,
        email:'',
        emailError: false,
        emailErrorMessage: '',
    };

    _profileEdit() {
        Actions.profileedit();
      }
      _notificationsPage(){
          Actions.notifications();
      }
      _infoPage = () =>{
          this.props.toggleTour();
      }
      toggleModal = () => {
        this.setState({isModalVisible: !this.state.isModalVisible});
      };

         
     render() {
       const {index, routes} = this.props.tabs;

           
       
       console.log(index);
       return (
        <SafeAreaView>
        <View style={styles.container}>
            <StatusBar />
            
            
                
                    <TouchableOpacity onPress={this._infoPage}>
                        <MaterialCommunityIcons name="information-outline" size={24} color="#979797" style={{padding:10}}/>
                    </TouchableOpacity>

 
        </View>
        </SafeAreaView>
       );
     }
   
   }
   
function mapStateToProps(state){
    return {
      tabs : state.tabs
    }
  }
  
function mapDispatchToProps(dispatch){
    return {
      changeCounter : (index) => dispatch({type:'PAGE_CHANGED',payload: index}),
      toggleTour: () => dispatch({
          type: 'TOUR_OPENED'
      })
    }
  
  }

  export default connect(mapStateToProps, mapDispatchToProps)(NavBar);

我正在考虑将this.props.start（）放在一个函数中，然后从另一个组件调用该函数。我该怎么办？

这是我的App.js

export default class App extends Component { 
  render() { 
    return (
        <Provider store = {store}>
          <Routes />
        </Provider>
          

    ); 
  } 
}

对NavBar的调用位于“路线”中：

export default class Routes extends Component {
  
  render() {
    return (
      
      <Router navBar={TopNavbar}> 
        <Scene key="root">
          ...
        </Scene>
      </Router>
    );
  }
}

Answer 1

您可以将函数作为道具传递给其他组件，例如，在渲染函数中，您可以执行以下操作：

render() {
  return (
    <View>
      <YourComponent startTutorial={this.props.start}></YourComponent>
    </View>
  );
}

然后在YourComponent中通过按钮或任何事件调用this.props.startTutorial();。

**更新

因此，您可以执行以下操作：

export default class App extends Component { 
    render() { 
      return (
          <Provider store = {store}>
            <Routes /*here*/ startTutorial={this.props.start} />
          </Provider>
      ); 
    } 
  }

  export default class Routes extends Component {

    /*here*/
    CTopNavbar = ({ children }) => (
        <TopNavbar startTutorial={this.props.startTutorial}>
          {children}
        </TopNavbar>
      );

    render() {
      return (
        
        <Router navBar={/*here*/CTopNavbar}> 
          <Scene key="root">
            ...
          </Scene>
        </Router>
      );
    }
  }

然后在NavBar中，在您的按钮中运行this.props.startTutorial();。

如何在React Native中从另一个组件触发功能？

1 个答案: