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

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

我刚刚创建了两个单独的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
        }
      });

导出默认类Detay扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：[]，
aptitle2:[]
}
}
componentDidMount（）{
axios.get（）http://oyleboyle.com/data.json')
。然后（响应=>{
this.setState（{apittitle:response.data.apaler}）；
})
.catch（错误=>{
console.log（错误）；
});
axios.get（）http://oyleboyle.com/data2.json')
。然后（响应=>{
this.setState（{aptitle2:response.data.apacler}）；
})
.catch（错误=>{
console.log（错误）；
});
}
renderItem（）{
}
render（）{
返回(
{this.state.apitTitle.map（（id，i）=>
)}
{this.state.aptitle2.map（（id，i）=>
)}
);
}
}
const styles=StyleSheet.create({
flexview：{
flex:1，flexDirection:'行'，
玛金托普：10，
为内容辩护：“周围空间”
},
img：{
宽度：280，
身高：280，
对齐项目：“居中”，
溢出：“隐藏”
},
标题：{
textAlign:'中心'，
颜色：“红色”，
尺寸：18
},
五：{
textAlign:'中心'，
玛金托普：5
},
塞佩特：{
颜色：'白色'，
textAlign:'中心'，
玛金托普：5，
尺寸：22，
背景颜色：“红色”，
边界半径：7
},
卡丁车：{
边界半径：8，
填充：5
}
});

---

我使用的是row，我需要两列同时列出，只有一个json文件

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

 //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);
      });
    }

然后，可以使用平面列表可视化组合阵列

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>
    );
  }

renderItem（项目，索引）{
//归还你的物品
返回(
id:{item.id}
滴度：{item.title}
fiyat:{item.fiyat}
)
}
render（）{
返回(
this.renderItem（项，索引）}
/>
);
}

演示输出：

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);
      });
    }

工作示例：

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);
      });
    }

---

您好，我编辑了代码并编写了更多有关它的信息。你能帮我吗check@Jamiryo你不想合并数据吗？您只想将它们并排显示？它已经在工作，但使用两个单独的数据。我只想创建一个文件并使用它data@Jamiryo看看我的答案，第一个代码片段展示了如何将它合并成一个你是救命恩人