Как передать строку через реквизит, а затем использовать ее в качестве значения в теге компонента в React Native? - PullRequest
Новая
       24

Как передать строку через реквизит, а затем использовать ее в качестве значения в теге компонента в React Native?

0 голосов
/ 25 апреля 2019

У меня есть тег String name, и я передал его из компонента 'Main' в компонент 'Details' с помощью реквизита и хочу использовать эту строку тега для использования в функции рендеринга таких деталей, как

Попробовал это вфункция рендеринга 'Details', не работает 

render() {
    const Tagname = this.props.navigation.getParam('component', 'Component Does not exist')
    return (
      <Container>
        <Tagname/>
      </Container>
    )
  }

Значение const Tagname равно Basic (консоль зарегистрирована), и у меня есть компонент, созданный и импортированный правильно с именем Basic

Вот основной: 

import React, { Component } from "react";
import { View, Text, Button } from 'react-native';
export default class Main extends Component {
  render() {
    <View>
      <Text
        style={styles.texts}
        onPress={()=> {
          this.props.navigation.navigate('Details', {
            component: 'Basic'
          })
        }}
      >
        {elem}
      </Text>
    </View>
  }
}

Маршрутизатор: 

import React from 'react';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
import Details from './Details'
import Main from './Main'

const AppNavigator = createStackNavigator({
  Home: {
    screen: Main,
  },
  Details: {
    screen: Details,
  },
}, {
    initialRouteName: 'Home',
});

export default createAppContainer(AppNavigator);

Подробности: 

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Basic from './Basic.js'

export default class Details extends Component {
  render() {
    const Tagname = this.props.navigation.getParam('component', 'Component Does not exist')
    return (
      <View>
        <Tagname/>
      </View>
    )
  }
}

Базовый: 

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class Basic extends Component {
  render() {
    return (
      <View>
        <Text>Hello world</Text>
      </View>
    )
  }
}

Ответы [ 2 ]

1 голос
/ 25 апреля 2019

Если вы хотите отобразить строку с соответствующим компонентом, вы можете использовать объект, подобный этому: 

import Basic from './Basic';

const components = {
  Basic,
};

А в вашей функции рендеринга: 

render() {
    const Tagname = this.props.navigation.getParam('component', 'Component Does not exist');
    const Component = components[Tagname];
    return (
      <Container>
        <Component/>
      </Container>
    )
  }
0 голосов
/ 25 апреля 2019

Я не совсем понимаю, что вы хотите сделать. Вы просто хотите отобразить строку с помощью реквизита? Как это: 

  render() {
    const tagName = this.props.tag;
    return (
      <View>
        <Text>{tagName}</Text>
      </View>
    )
  }
...