Hide/show 标签 <Text> 基于服务/动态地来自 json 在 react native

Question

下面是我的JSON,

"[{"id":32156465,"b_name":"KFC","website":"kfc.com","category":[]},{"id":87985645,"b_name":"Pizza Hut","website":"pizzahut.com","category":[{"id":"357","title":"Pizza"}]},{"id":78956465,"b_name":"Mc Donalds","website":"mcdonalds.com","category":[{"id":"951","title":"Burger"}]},{"id":32136556,"b_name":"Eagle Boys Pizza","website":null,"category":[]}]"

需要迭代类别数组，如果有objects存在，那么我需要获取标题并显示为：

Category: Testing

否则不应显示 "Category:" 文本。

这就是我试过的全部代码

export default class App extends Component<Props> {

      constructor(props) {
        super(props)
        this.state = { showCategoryList: false }
      }

      categoriesList(categoriesObject) {
        var categoriesListStr = ""
        categoriesObject.map((categoryDict) => {
          Object.keys(categoryDict).map(function (key, value) {
            console.log("Key- " + key + "Value-" + value)
            if ((key == "title") && (categoryDict[key] !== null)) {
              categoriesListStr = categoryDict[key]
            }
          })
        })
        return categoriesListStr
      }

      _renderItem = ({ item, section }) => {
        return (
          <View style={styles.rowViewContainer1}>
            <Text style={{fontSize: 12, fontWeight: "normal", marginLeft: 10}}>{'Business Name: ' + item.b_name}</Text>
            <Text style={{fontSize: 12, fontWeight: "normal", marginLeft: 10}}>{'Website: ' + item.website}</Text>
            <Text style={{fontSize: 12, fontWeight: "normal", marginLeft: 10}}>{'Category: ' + this.categoriesList(item.category)}</Text>
            {/* here, if categoriesListStr returns empty string, then we should not display"Category: ", how can i achieve this */}
            <View style={styles.lineViewSeparation} />
          </View>
        )
      };

      _renderSectionHeader = ({ section }) => {
        return (
          <View style={styles.sectionHeader}>
            <Text style={styles.header}>{section.key}</Text>
          </View>
        )
      }
      render() {
        var prospectsDataArr = [{"id":32156465,"b_name":"KFC","website":"kfc.com","category":[]},{"id":87985645,"b_name":"Pizza Hut","website":"pizzahut.com","category":[{"id":"357","title":"Pizza"}]},{"id":78956465,"b_name":"Mc Donalds","website":"mcdonalds.com","category":[{"id":"951","title":"Burger"}]},{"id":32136556,"b_name":"Eagle Boys Pizza","website":null,"category":[]}]
        var prospectsDict = { key: 'New', data: prospectsDataArr }
        dataSourceArr = [prospectsDict]
        console.log("renderedItem " + this._renderItem)
        return (
          <View style={{ marginTop: (Platform.OS) == 'ios' ? 20 : 0 }}>
            <SectionList style={styles.cellView}
              sections={dataSourceArr}
              renderItem={this._renderItem}
              renderSectionHeader={this._renderSectionHeader}
              keyExtractor={(item, index) => index}
            />
          </View>
        );
      }
    }

这里，如果categoriesListStr returns为空字符串，那么我们不应该显示"Category: "，如何实现

Answer 1

如果 this.state.names 是一个数组，那么您可以遍历名称数组并显示数组中的每个元素标题值。

render() {
  return Array.isArray(this.state.names) ? this.state.names.map(el => {
    return (
      <Text>Name : {el.title}</Text>
    )
  }) : <Text>No Data</Text>
}

Answer 2

替换以下内容：

<Text> 
  {'Category: ' + this.categoriesList(item.category)}
</Text>

有了这个：

{
item.category.length > 0 && <Text>{'Category: ' + this.categoriesList(item.category)}</Text>
}

补充说明：

您的 categoriesList 功能 return 只有一个类别标题。如果你要有最大。 category 数组中只有一个 object 或者你可以 returning 任何一个标题，那么你可能不需要 categoriesList 函数，你可以只使用

{'Category: ' + item.category[0].title}

到return第一个标题（如果找到）代替

{'Category: ' + this.categoriesList(item.category)}</Text>}

Hide/show 标签 <Text> 基于服务/动态地来自 json 在 react native

Hide/show a tag <Text> based on service/ dynamically from json in react native

reactive-programming

ios

react-native

react-native-ios