javascript - 无法在 Flatlist react-native 上显示 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值，我要显示Name和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>
);