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()可以接受一个对象作为传递给子场景的道具，因此您可以尝试从 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'/>

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函数。

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

2 个答案: