代码之家 › 专栏 › 技术社区 › iOSDev

在react native中基于服务/动态地从json隐藏/显示标记

react-native-ios reactive-programming react-native ios

iOSDev · 技术社区 · 7 年前

下面是我的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":[]}]"

需要迭代类别数组,如果存在任何对象,则需要获取标题并显示为:

Category: Testing

否则,不应显示“类别:”文本。

这就是我的全部代码

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返回空字符串,那么我们不应该显示“Category:”,我如何实现这一点

2 回复 | 直到 6 年前

xuhaib 6 年前

更换以下部件:

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

使用此选项:

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

附加说明:

你的 categoriesList 函数只返回一个类别标题。如果要在 category 数组或您可以返回任何一个标题,那么您可能不需要 分类列表 功能,您只需使用

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

返回第一个标题(如果找到)以代替

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

Raj Kumar N 7 年前

如果这个。状态names是一个数组,然后可以迭代names数组并显示数组中的每个元素标题值。

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