如何使用react-native-router-flux從其他場景訪問場景功能

Question

我有一種感覺，我可能會走錯方向，
因為它不可能是這種不直觀的
但話說回來，我真的很蠢。
所以我的問題是：
當我當前不在場景中時，如何訪問場景功能。
我的例子：

App.js

import React from 'react';
import {Text, View} from 'react-native';
import Home from './components/Home';
import Add from './components/Add';
import {Router, Scene, Actions} from 'react-native-router-flux';

class App extends React.Component {
  constructor() {
    super();
  }

  render() {
    return(
      <Router>
        <Scene key='root'>
        <Scene key='home' component={Home} title='Home' rightButtonImage={require('./assets/plus.png')} onRight={() => {Actions.add()}}/>
        <Scene key='add' component={Add} title='Add'/>
        </Scene>
      </Router>
    );
  }
}

export default App;

Home.js

import React from 'react';
import {View, Text, ScrollView, SafeAreaView, Image, Dimensions} from 'react-native';
import ScrollCompanyIndex from './ScollCompanyIndex';

var {screenHeight, screenWidth} = Dimensions.get('window');

var companies = require('./companies.json');
var companiesString = JSON.stringify(companies);
var comapniesJson = JSON.parse(companiesString.toString());
var companyList = [];

class Home extends React.Component {
    constructor() {
        super();
        companyList = [];
        comapniesJson.companies.forEach(element => {
            companyList.push(element);
        });
    }

    rerenderComponent() {
        console.log('Rerendering the component');

    }

    render() {
        return(
            <SafeAreaView style={{flex: 1}}>
                <ScrollView>
                    {
                        companyList.map((item, key) => (
                            <ScrollCompanyIndex key={key} imageUri={'https://picsum.photos/' + (129 + Math.floor(Math.random() * 3)) + '/' + (129 + Math.floor(Math.random() * 3))} companyName={item.name} companyAddress={item.address + ', ' + item.city}/>
                        ))
                    }
                </ScrollView>
            </SafeAreaView>
        );
    }
}

export default Home;

Add.js

import React from 'react';
import {View, Text, Button} from 'react-native';
import { Actions } from 'react-native-router-flux';

class Add extends React.Component {
    render() {
        return(
            <View>
                <Button onPress={gallaryButtonPressed} title='Camera / Gallery Button' color='#841584'/>
                <Button onPress={addButton} title='Add button' color='#841584'/>
            </View>
        );
    }
}

function gallaryButtonPressed() {

}

function addButton() {

}

export default Add;

所以。 我如何訪問，例如，在Home.js中找到的函數rerenderComponent（） ，
當我單擊Add.js 中的“添加按鈕”按鈕時，該按鈕當前鏈接到函數addButton（）但是nvm ，

非常感謝你：3

Answer 1

由於Actions.key()可以接受一個對象作為傳遞給子場景的道具，因此您可以嘗試從主場景路由到添加場景，您可以在其中傳遞rerenderComponent()作為回調函數。

所以它會像：

Home.js

toAdd() {
    Actions.add({ rerenderComponent: this.rerenderComponent.bind(this) })
}

Add.js

<Button onPress={this.props.rerenderComponent} title='Add button' color='#841584'/>

Answer 2

你問了一個很好的問題，我也想知道這個，但后來我找到了解決方案。

App.js

<Scene key='home' component={Home} title='Home' rightButtonImage=require('./assets/plus.png')} onRight={() => {}} />

Home.js

constructor(props) {
        super(props);
        companyList = [];
        comapniesJson.companies.forEach(element => {
            companyList.push(element);
        });
    }

    componentDidMount() {
     this.props.navigation.setParams({
     onRight: this.addButton         
     });
    }

    addButton = () => {
      return <Button onPress={() => Actions.Something()} title='Add button' color='#841584'/>;
    }

同樣，您可以訪問rerenderComponent函數。