如何使用 react-native-router-flux 从其他场景访问场景功能答案

【问题标题】：How to access scene functions from other scenes with react-native-router-flux如何使用 react-native-router-flux 从其他场景访问场景功能
【发布时间】：2019-05-18 09:38:30
【问题描述】：

我感觉我可能走错了方向，
因为不可能这么不直观
但话说回来，我真的很笨。
所以我的问题是：
当前不在场景中时如何访问场景功能。
我的例子：

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

【问题讨论】：

以下解决方案对您有用吗？

标签： javascript react-native-router-flux

【解决方案1】：

由于Actions.key() 可以接受一个对象作为传递给子场景的道具，您可以尝试从 home 场景路由到 add 场景，其中您可以将rerenderComponent() 作为回调函数传递。

所以它会是这样的：

Home.js

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

Add.js

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

【讨论】：

【解决方案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函数。

【讨论】：