react-native - 有没有办法显示数组的内容

问题描述

我想显示“products”数组中的内容“product_id”

我正在设置一个新组件来查看 products 数组中的 product_id。

这里的期望是显示数组的内容。

import { View, Text } from 'react-native'
import { Button, SpinnerButton } from '../../components'
import { inject, observer } from 'mobx-react/native'
import styles from './style'
import { calcSize } from '../../utils'

@inject('UserStore')
@observer
class ProductInfo extends Component {
  constructor(props) {
    super(props)
    // this.state = {}
    // this.item = this.props.navigation.state.item ? this.props.navigation.state.params.item : 'no item'
  }

  render() {
    return (
      <View style={styles.container}>
        {this.props.navigation.state.params.item.products.map(pr => (
          <Text>{pr.product_id}</Text>
        ))}
      </View>
    )
  }
}

export default ProductInfo

在这里，我将带有“ProductInfo”的参数发送到上面的页面..

import { View, Text, FlatList, TouchableOpacity } from 'react-native'
import Style from './style'
import { inject, observer } from 'mobx-react/native'
import Icon from 'react-native-vector-icons/MaterialIcons'
import React, { Component } from 'react'

let mounted = false
@inject('UserStore', 'NavigationStore')
@observer
class DynamicList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: props.data,
      currentSearch: props.currentSearch,
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.data !== this.state.data) {
      this.setState({ data: nextProps.data, currentSearch: nextProps.currentSearch })
    }
  }

  _renderSuggestion = ({ item, index }) => {
    console.log('_renderSuggestion', item)
    const splittedName = item.split(' ')
    let splittedSearch = this.state.currentSearch.toUpperCase().split(' ')

    splittedSearch = splittedSearch.map(x => x.trim()).filter(x => x.length > 1)
    let suggestion = []
    if (splittedSearch.length == 0) {
      suggestion = splittedName.map((word, index) => <Text key={index}>{word} </Text>)
    } else {
      let highlightedWords = []
      splittedName.forEach((word, index) =>
        splittedSearch.forEach(wordFromSearch => {
          const currentWord = word.toUpperCase()
          const isAlreadyHighlighted = highlightedWords.includes(currentWord)
          if ((currentWord.includes(wordFromSearch.toUpperCase()) && this.state.currentSearch.length > 0) || isAlreadyHighlighted) {
            let v = (
              <Text key={index} style={{ color: '#2eb872' }}>
                {word}{' '}
              </Text>
            )
            if (!isAlreadyHighlighted) {
              highlightedWords.push(currentWord)
            }
            suggestion[index] = v
          } else {
            let v = <Text key={index}>{word} </Text>
            suggestion[index] = v
          }
        })
      )
    }
    return (
      <TouchableOpacity
        style={Style.suggestionView}
        onPress={() => {
          this.props.UserStore.addRecentSearch(item)
          this.props.NavigationStore.navigate({ routeName: 'ProductInfo', params: { item } })

          //this.props.NavigationStore.navigate({ routeName: 'SearchResult', params: { item: item } })
          this.autoCompleteTimeout = setTimeout(() => {
            if (mounted) this.setState({ showAutoComplete: false })
          }, 400)
        }}
      >
        <Icon name='search' size={20} style={{}} />
        <Text style={{ marginLeft: 20, textAlign: 'left', color: '#9B999A' }}>{suggestion}</Text>
      </TouchableOpacity>
    )
  }
  render() {
    console.log('data:', this.state.data)
    return (
      <View style={{ paddingVertical: 10 }}>
        <FlatList initialNumToRender={20} data={this.state.data} keyExtractor={(item, index) => item.toString()} renderItem={this._renderSuggestion} keyboardShouldPersistTaps='always' />
      </View>
    )
  }
}

let Results = props => {
  console.log(props)
  switch (props.navigation.state.key) {
    case 'Products': {
      let data = props.screenProps.data.suggestions.products.map(pr => pr.product_title)
      return <DynamicList data={data} currentSearch={props.screenProps.currentSearch} />
      break
    }
    case 'Brands': {
      let data = props.screenProps.data.suggestions.warehouses.map(pr => pr.warehouse_name)
      return <DynamicList data={data} currentSearch={props.screenProps.currentSearch} />
      break
    }

    case 'Categories': {
      let data = props.screenProps.data.suggestions.categories.map(pr => pr.categories)
      return <DynamicList data={data} currentSearch={props.screenProps.currentSearch} />
      break
    }

    case 'UPC': {
      let data = props.screenProps.data.suggestions.upcs.map(pr => pr.product_title)
      return <DynamicList data={data} currentSearch={props.screenProps.currentSearch} />
      break
    }

    case 'Tags': {
      let data = props.screenProps.data.suggestions.tags.map(pr => pr.product_title)
      return <DynamicList data={data} currentSearch={props.screenProps.currentSearch} />
      break
    }
  }
  return <Text>Home</Text>
}

const TabNavigator = createMaterialTopTabNavigator(
  {
    Products: Results,
    Brands: Results,
    Categories: Results,
    UPC: Results,
    Tags: Results,
  },
  {
    tabBarOptions: {
      style: {
        backgroundColor: 'black',
      },
      labelStyle: {
        fontSize: 9,
        margin: 0,
        padding: 0,
        fontFamily: 'Poppins-bold',
      },
      // etc
    },
  }
)

let f = Component => {
  let r = props => {
    // alert(props)
    return <Component {...props} />
  }
  return r
}

export default createAppContainer(TabNavigator)

我想按下项目，它会在“ProductInfo”上显示它的信息

标签： react-native

react-native - 有没有办法显示数组的内容

问题描述

解决方案

推荐阅读