Как передать параметры родительской активности дочерним вкладкам в React Native?

Я новичок в реагировании на родной язык и ищу, может ли кто-нибудь подробно рассказать мне, как передать параметры на дочернюю вкладку.

Я уже исследовал и обнаружил, что это можно сделать с помощью screenprops, однако ни один из них не дал мне четкого понимания, как использовать его для передачи параметров. Чистый образец кода может оказаться полезным.

вы должны прочитать это, прежде чем отправлять свой вопрос stackoverflow.com/help/mcve

Nikhil Kinkar 18.12.2018 19:08
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
2
1
1 113
1

Ответы 1

Это довольно просто, если вы недостаточно осмотритесь, есть много пакетов, я рекомендую вам использовать следующий пакет и взглянуть на следующий пример. В следующий раз поищите информацию, которая вам нужна, прежде чем что-то спросить.

import React, { Component } from 'react';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

import SceneA from './SceneA';
import SceneB from './SceneB';

class Layout extends Component {
  constructor(props) {
    super(props);

    this.state = {
      index: 0,
      routes: [
        { key: 'active', title: 'Scene A' },
        { key: 'inactive', title: 'Scene B' },
      ],
    };

    this.renderScene = this.renderScene.bind(this);
    this.renderLabel = this.renderLabel.bind(this);
    this.onTabChange = this.onTabChange.bind(this);
  }

  onTabChange(index) {
    this.setState({ index });
  }

  // Here you can send props to different tab components 
  renderScene({ route }) {
    if (!route.key) return null;

    if (route.key === 'active') {
      return <SceneA type = "active" />; // SceneA specific props here
    }

    if (route.key === 'inactive') {
      return <SceneB type = "inactive" />;
    }
  }

  renderLabel({ route }, props) {
    const { index } = this.state;
    const selected = route.key === props.navigationState.routes[index].key;

    return (
      <View>
        <Text>
          {route.title.toUpperCase()}
        </Text>
      </View>
    );
  }

  renderTab() {
    return (
      <TabView
        navigationState = {this.state}
        onIndexChange = {this.onTabChange}
        renderScene = {this.renderScene}
        renderTabBar = {props => (
          <TabBar
            {...props}
            renderLabel = {e => this.renderLabel(e, props)}
          />
        )}
      />
    );
  }

  render() {
    return (
      <View>
        {this.renderTab()}
      </View>
    );
  }
}

export default Layout;

Другие вопросы по теме