无法在flatlist反应本机上显示JSON数据

Question

在这里可以在我的flatlist上解析json值，因为在console.log中，我可以看到，flatlist也在扩展，但值未显示在列表中。选择特定的列表值之后，第二个屏幕上正在进行数据并显示数据，但在第一个屏幕上空白。请帮助

    import React, { Component } from 'react';
    import { View, Text, TextInput,   
    FooterTab,Button,TouchableOpacity, ScrollView, StyleSheet,
     ActivityIndicator ,Header,icon,FlatList} from 'react-native';
    import { createStackNavigator } from 'react-navigation';  
    import { SearchBar } from 'react-native-elements';

   class RenderList extends Component {
  static navigationOptions = {
    title: 'Selected Item',
    header: null,
  };
  constructor() {
    super();
    this.state = {
      data: null,
      loading: true,
      search: '',
    };
  }
  componentDidMount() {
    this.createViewGroup();
  }
  createViewGroup = async () => {
    try {
      const response = await fetch(
        'http:///Dsenze/userapi/grouphier/viewgroup',
        {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            password: 'admin',
            username: 'admin',
            viewall: 'false',
            id: [4],
            startlimit: '0',
            valuelimit: '10',
          }),
        }
      );
      const responseJson = await response.json();
      const { groupData } = responseJson;
      this.setState({
        data: groupData,
        loading: false,
      });
    } catch (e) {
      console.error(e);
    }
  };
  clickedItemText(clickedItem) {
    this.props.navigation.navigate('Item', { item: clickedItem });
  }
  updateSearch = search => {
    this.setState({ search });
  };
  keyExtractor = ({ id }) => id.toString();
  keyExtractor = ({ name }) => name.toString();
  renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      activeOpacity={0.4}
      onPress={() => {
        this.clickedItemText(item);
      }}>
    </TouchableOpacity>
  );
  render() {
    const { loading, data } = this.state;
    return (
      <ScrollView>
        <View style={styles.container1}>
          {this.state.loading ? (
            <ActivityIndicator size="large" />
          ) :
          (
            <FlatList 
              data={data}
              renderItem={this.renderItem}
             keyExtractor={this.keyExtractor}
            />
          )}
        </View>
      </ScrollView>
    );
  }
}   
    class ClickedItem extends Component
    {
        constructor() {
            super();
            this.state = {
              inputValue: '',
              // Default Value of the TextInput
              // Default value for the QR Code
            };
          }
        static navigationOptions = 
        {
            title: "Selected Item",
            header:  null
        };
        render()
        {
            return(
                <ScrollView>
                <View style = { styles.container2 }>
        <TextInput style={styles.inputBox}
         underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="Hospital Id"
          editable={false}
          placeholderTextColor="#000000"
          onChangeText={(hospital_id) => this.setState({hospital_id})}>{ this.props.navigation.state.params.item.name }</TextInput>
       <TextInput   style={styles.inputBox}
         underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="Field 2"
          secureTextEntry={false}
          placeholderTextColor="#000000"
          onChangeText={(Field2) => this.setState({Field2})}/>
    <TouchableOpacity style={styles.button}onPress={() => {Insert(this.state.hospital_id,this.state.Field2,this.state.Field3,this.state.Field4,this.state.Field5,this.state.Field6);{this.getTextInputValue}}}>
              <Text style={styles.buttonText}>Insert</Text>
          </TouchableOpacity>
                </View>
                </ScrollView>
            );
        }
    }
    export default InvDemoPost = createStackNavigator(
    {
        List: { screen: RenderList,
                 header: true},
        Item: { screen: ClickedItem,
                header: null }
    });

    const styles = StyleSheet.create(
    {
        container1:
        {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        ListContainer :{
            borderColor: '#48BBEC',
            backgroundColor: '#000000',
            color:'red',
            alignSelf: 'stretch' ,
        },
        container2:
        {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            paddingHorizontal: 15
        },
        inputBox:{
            width:300,
            borderColor: '#48BBEC',
            backgroundColor: '#F8F8FF',
            borderRadius:25,
            paddingHorizontal:16,
            fontSize:16,
            color:'#000000',
            marginVertical:10, 
        },
        button:{
            width:300,
            backgroundColor:'#4169E1',
            borderRadius:25,
            marginVertical:10,
            paddingVertical:16
        },
        buttonText:{
        fontSize:16,
        fontWeight:'500',
        color:'#ffffff',
        textAlign:'center'
        },
        item:
        {
            padding: 15
        },
        text:
        {
            fontSize: 18
        },
        separator:
        {
            height: 2,
            backgroundColor: 'rgba(0,0,0,0.5)'
        }
    });

 // Json response is like that 

//JSON值在下面，我必须显示名称和ID

{
  "groupData": [{
    "hierarchy": 1,
    "id": 1,
    "name": "Karnataka",
    "parent": 1,
    "type": 1
  }, {
    "hierarchy": 2,
    "id": 2,
    "name": "Bangalore",
    "parent": 1,
    "type": 2
  }, {
    "hierarchy": 3,
    "id": 3,
    "name": "North Bangalore",
    "parent": 2,
    "type": 2
  }, {
    "hierarchy": 4,
    "id": 4,
    "name": "St.Mary's Hospitals",
    "parent": 3,
    "type": 2
  }, {
    "hierarchy": 4,
    "id": 5,
    "name": "Mandya Clinic",
    "parent": 6,
    "type": 2
  }, {
    "hierarchy": 2,
    "id": 6,
    "name": "Mandya",
    "parent": 1,
    "type": 1
  }, {
    "hierarchy": 4,
    "id": 7,
    "name": "Blr Clinic3",
    "parent": 3,
    "type": 1
  }, {
    "hierarchy": 4,
    "id": 8,
    "name": "kings hospital",
    "parent": 3,
    "type": 2
  }, {
    "hierarchy": 1,
    "id": 10,
    "name": "Tamil Nadu",
    "parent": 10,
    "type": 1
  }],
  "success": "true"
}

//谢谢

Answer 1

您的RenderItem函数仅返回TouchableOpacity。如果您在TouchableOpacity中放置一些东西，则应在屏幕上看到一些东西。

在此示例中，我添加了一个简单的Text组件，其中包含您项目中的名称。

renderItem = ({ item }) => (
  <TouchableOpacity
      style={styles.item}
      activeOpacity={0.4}
      onPress={() => {
        this.clickedItemText(item);
      }}
  >
    <Text>{item.name}/<Text>
  </TouchableOpacity>
);