Question

因此，我开始从视频中学习本机，他们使用了ListView，但由于ListView很快将被弃用并将其删除。我知道FlatList将是适当的替代品，但作为一个初学者，我无法迁移到Flatlist。

ListView已从React Native中删除。请参阅链接以获取更多信息或使用'deprecated-react-native-listview'

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  FlatList,
  ActivityIndicator,
} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';


export default class Login extends Component {
   static navigationOptions= ({navigation}) =>({
          header: null
    });
  state = {
    username : [],
    data : []
  }

   constructor(props) {
    super(props);

    this.state = {
      isLoading: true, // check if json data (online) is fetching
      dataSource: [], // store an object of json data
    };
  }
  componentDidMount () {

     return fetch("http://172.16.2.109:8090/assessment/getdata2.php?username=test2312")
          .then((response) => response.json())
          .then((responseJson) => {
            // set state value
            this.setState({
              isLoading: false, // already loading
              dataSource: responseJson

            });

          })

          .catch((error) => {
            ToastAndroid.show(error.toString(), ToastAndroid.SHORT);

       });

}

  render() {
    const { navigate } = this.props.navigation;
     if(this.state.isLoading) {
      return(
        <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
      )
    }

    return(
      <View style={{flex: 1, paddingTop:20}}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => {
            return (
              <View>
                <Text style={styles.info}>{item.ascendant} is </Text>
              </View>
            )
          }}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
}
}

const styles = StyleSheet.create({
  info: {
    fontSize: 20,
  }
});

Answer 1

希望这会有所帮助！

import { FlatList } from 'react-native';

<FlatList
    data={this.state.dataSource}
    showsVerticalScrollIndicator={false}
    renderItem={(rowData, index) => (
    <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData.fruit_name)}>{rowData.fruit_name}</Text>

    <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    )}
    keyExtractor={(item, index) => index.toString()}
    style={{marginTop: 10}}
/>

Answer 2

尝试此代码

import { AppRegistry, StyleSheet, FlatList, Text, View, Alert, ActivityIndicator, Platform} from 'react-native';

class Project extends Component {

 constructor(props)
  {

    super(props);

    this.state = { 
    isLoading: true
  }
  }

  componentDidMount() {

       return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php')
         .then((response) => response.json())
         .then((responseJson) => {
           this.setState({
             isLoading: false,
             dataSource: responseJson
           }, function() {
             // In this block you can do something with new state.
           });
         })
         .catch((error) => {
           console.error(error);
         });
     }

FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }

  GetFlatListItem (fruit_name) {

  Alert.alert(fruit_name);

  }


  render() {

    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (

<View style={styles.MainContainer}>

       <FlatList

          data={ this.state.dataSource }

          ItemSeparatorComponent = {this.FlatListItemSeparator}

          renderItem={({item}) => <Text style={styles.FlatListItemStyle} onPress={this.GetFlatListItem.bind(this, item.fruit_name)} > {item.fruit_name} </Text>}

          keyExtractor={(item, index) => index}

         />


</View>

    );
  }
}

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',
flex:1,
margin: 10,
paddingTop: (Platform.OS === 'ios') ? 20 : 0,

},

FlatListItemStyle: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },

});

AppRegistry.registerComponent('Project', () => Project);

响应本机Tried以获取超出范围索引NaN的框架（MYSQL数据库）

2 个答案: