将 json 页面连接到 React-native 中的 flex 行

Posted 2023-02-22

【中文标题】将 json 页面连接到 React-native 中的 flex 行

【英文标题】：Connecting json page to and flex row in React-native

【发布时间】：2019-10-01 19:54:05

【问题描述】：

我对 react native 中的 flex 行有一个问题，所以我只需要使用一个 json 数据文件来生成列表。但是，我真的不知道怎么做。

我刚刚创建了 2 个单独的 json，但问题是它们只是彼此延迟列出。我只想要一个。

 export default class Detay extends React.Component 

        constructor(props) 
      super(props);
      this.state = 
        ApiTitle: [],
        ApiTitle2: []
            
    
    componentDidMount() 
      axios.get('http://oyleboyle.com/data.json')
      .then(response => 
        this.setState( ApiTitle: response.data.aparatifler );
      )
      .catch(error => 
        console.log(error);
      );
      axios.get('http://oyleboyle.com/data2.json')
      .then(response => 
        this.setState( ApiTitle2: response.data.aparatifler );
      )
      .catch(error => 
        console.log(error);
      );

    


    renderItem()

    

    render() 
      return (
        <View style=backgroundColor: "white">
        <ScrollView>
        <View style=styles.flexview>
        <View>this.state.ApiTitle.map((id, i)=>
            <Urun title=id.title image="https://nelazimsa.carrefoursa.com/wp-content/uploads/2018/03/turk-kahvesi.jpg" fiyat="12"/>

           )
          </View>

        <View>this.state.ApiTitle2.map((id, i)=>

            <Urun title=id.title image="https://nelazimsa.carrefoursa.com/wp-content/uploads/2018/03/turk-kahvesi.jpg" fiyat="12"/>

        )
          </View>

          </View>

          </ScrollView>
          </View>
      );
    
  

 const styles = StyleSheet.create(
        flexview: 
        flex: 1, flexDirection: 'row' , 
        marginTop: 10 , 
        justifyContent:'space-around'
        ,
        img: 
          width: 280, 
          height: 280, 
          alignItems: 'center', 
          overflow: 'hidden'
        ,
        titlee: 
          textAlign: 'center', 
          color: 'red', 
          fontSize: 18
        ,
        fiyatt: 
          textAlign: 'center', 
          marginTop: 5
        ,
        sepett: 
          color: 'white' ,
          textAlign: 'center', 
          marginTop: 5, 
          fontSize: 22 , 
          backgroundColor: 'red', 
          borderRadius: 7
        ,
        kart: 
          borderRadius: 8, 
          padding: 5
        
      );

我正在使用行，我需要两列同时列出，只有 1 个 json 文件

【参考方案1】：

您可以通过执行以下操作将两个数组合并为一个：

 //copy the old state of ApiTitle and add new items from response.data
 this.setState( ApiTitle: [...this.state.ApiTitle, ...response.data.aparatifler]);

完整代码：

componentDidMount()
      axios.get('http://oyleboyle.com/data.json')
      .then(response => 
        // here we are copying the content of ApiTitle and the content of repsonse.data together 
        this.setState( ApiTitle: [...this.state.ApiTitle, ...response.data.aparatifler]);
      )
      .catch(error => 
        console.log(error);
      );
      axios.get('http://oyleboyle.com/data2.json')
      .then(response => 
        // here we are copying the content of ApiTitle and the content of repsonse.data together again 
        this.setState( ApiTitle: [...this.state.ApiTitle, ...response.data.aparatifler]);
      )
      .catch(error => 
        console.log(error);
      );
    

然后可以使用 FlatList 可视化您的组合数组。

renderItem(item, index) 
  // render your items in return 
  return (
    <View key=index style=flex: 1>
        <Text> id: item.id </Text>
        <Text> titel: item.title </Text>
        <Text> fiyat: item.fiyat </Text>
    </View>
  )


render() 
    return (
      <View style=styles.container>
        <FlatList
        data=this.state.ApiTitle
        numColumns=2
        renderItem=( item, index ) => this.renderItem(item, index)
        />
      </View>
    );
  

演示输出：

工作示例：

https://snack.expo.io/Bk95rc_nE

【讨论】：

你好，我编辑了代码并写了更多关于它的信息。你能检查一下吗

@Jamiryo 您不想合并数据吗？您只想并排显示它们？

它已经在工作，但使用了 2 个单独的数据。我只想创建 1 个文件并使用该数据

@Jamiryo 看我的回答，第一个代码sn-p显示了如何合并成一个

你是救星