JSON Listvew反应本地

我想在列表视图中显示我的JSON。问题是我不知道如何使用代码来显示我的JSON数据 enter image description here JSON Listvew反应本地

这是我的JSON响应。我想表明非农产品市场准入和harga_jual

import React, { Component } from 'react'; 
 
import { 
 
    StyleSheet, 
 
    Text, 
 
    AsyncStorage, 
 
    Alert, 
 
    ListView, 
 

 
    View 
 
} from 'react-native'; 
 
import { Actions } from 'react-native-router-flux'; 
 
import { Header, Container, Content, Icon, Left, Body, Right, Button, Title, Card, CardItem, Thumbnail} from 'native-base'; 
 

 

 
export default class Product extends Component { 
 

 

 
    constructor(props) { 
 
    super(props); 
 

 
     var dataSource = new ListView.DataSource({ 
 
      rowHasChanged: (r1, r2) => r1 !== r2 
 
     }); 
 

 
     this.state={ 
 
     iduser: '', 
 
     idgrup_outlet: '', 
 
     url:'', 
 
     dataSource: new ListView.DataSource({ 
 
     rowHasChanged: (row1, row2) => row1 !== row2, 
 
     }), 
 
     
 

 
     } 
 
    } 
 

 
    async componentWillMount() { 
 

 
    const value = await AsyncStorage.getItem('iduser').then((value) => { 
 
      this.setState({ 
 
      'iduser': value 
 
      
 
      }); 
 
      console.log("ID User is : " + this.state.iduser); 
 
     }) 
 

 
     const value1 = await AsyncStorage.getItem('idgrup_outlet').then((value) => { 
 
     this.setState({ 
 
      'idgrup_outlet': value 
 
     }); 
 
      console.log("ID Group Outlet is : " +(this.state.idgrup_outlet)); 
 
     }) 
 

 
     const value2 = await AsyncStorage.getItem('url').then((value) => { 
 
      this.setState({ 
 
      'url': value    
 
      }); 
 
      console.log("URL is : " + this.state.url); 
 
     }) 
 

 
     console.log("ID User is : " + this.state.iduser); 
 

 
     let response = await fetch('http://'+this.state.url+'/web_services/list_produk/new.json', { 
 
           method: 'POST', 
 
           headers: { 
 
            'Accept': 'application/json', 
 
            'Content-Type': 'application/json', 
 
           }, 
 
           body: JSON.stringify({ 
 
            erzap: { 
 
            iduser: this.state.iduser, 
 
            idgrup_outlet: this.state.idgrup_outlet, 
 
            } 
 
           }) 
 
           }); 
 
     let responseJson = await response.json(); 
 
     // console.log(JSON.stringify(responseJson.produks[nama])); 
 
     console.log(JSON.stringify(responseJson.produks)); 
 
    } 
 

 
    render() { 
 
    return (
 
     <Container> 
 
     <Header style={{backgroundColor: '#03A9F4'}}> 
 
       <Left> 
 
        <Button transparent> 
 
         <Icon name='menu'/> 
 
        </Button> 
 
       </Left> 
 
      </Header> 
 
     <Content> 
 
      <ListView 
 
      dataSource={this.state.dataSource} 
 
      renderRow={(rowData) => <Text>{rowData.nama}</Text>} 
 
      /> 
 
     </Content> 
 
    </Container> 
 
    ); 
 
    } 
 

 
} 
 

 
const styles = StyleSheet.create({ 
 

 
    carditem: { 
 
    paddingLeft: 10, 
 
    }, 
 

 
});

这是我的代码

来源

2017-04-11 Aditia Dananjaya

你可以做这里是你的数据源的状态设置为responseJson在componentWillMount方法。所以它看起来像这样：

// ... the rest of the code 
let responseJson = await response.json(); 
this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(responseJson), 
});

来源

2017-04-11 02:53:26

但是，如何显示nama和harga_jual？ –

像这样'renderRow = {（rowData）=> {rowData.nama +''+ rowData.harga_jual}}' –

谢谢！它工作正常！你最好的兄弟 –

JSON Listvew反应本地

回答

相关问题