Как получить доступ к функциям сцены из других сцен с реакции-native-router-flux - PullRequest
Новая
       42

Как получить доступ к функциям сцены из других сцен с реакции-native-router-flux

0 голосов
/ 18 мая 2019

У меня такое чувство, что я могу идти в неправильном направлении,
Потому что это не может быть таким не интуитивным
Но опять же, я могу быть очень глупым.
Итак, мой вопрос:
Как я могу получить доступ к функциям сцены, когда я в данный момент не на сцене.
Мой пример:

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;

Итак. Как я могу получить доступ, например, к функции rerenderComponent () , которая находится в Home.js ,
когда я нажимаю кнопку "Добавить кнопку" , которая находится в Add.js , которая в настоящее время связана с функцией addButton (), но nvm это ,

Большое спасибо: 3

Ответы [ 2 ]

0 голосов
/ 26 мая 2019

Вы задали хороший вопрос, мне тоже было интересно, но потом я нашел решение.

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.

0 голосов
/ 23 мая 2019

Поскольку Actions.key() может принимать объект в качестве реквизита, передаваемого на дочернюю сцену, вы можете попытаться проложить маршрут к сцене add из сцены home , где вы можетепередайте rerenderComponent() в качестве функции обратного вызова.

, чтобы она была такой:

Home.js 

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

Add.js 

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