MySQL与React Native的整合

// 导入React Native的组件和API
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  ActivityIndicator,
  Button
} from 'react-native';
 
// 导入MySQL连接库
import MySQL from 'react-native-mysql';
 
// 创建MySQL连接
const connection = new MySQL({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});
 
// 连接到MySQL数据库
connection.connect();
 
export default class MyApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      data: [],
    };
  }
 
  // 获取数据库中的数据
  fetchData = () => {
    connection.query('SELECT * FROM your_table', (error, results, fields) => {
      if (error) throw error;
      this.setState({
        data: results,
        isLoading: false
      });
    });
  };
 
  // 组件挂载后获取数据
  componentDidMount() {
    this.fetchData();
  }
 
  // 渲染数据列表
  renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.description}>{item.description}</Text>
    </View>
  );
 
  // 渲染加载指示器
  renderLoading = () => (
    <View style={styles.loading}>
      <ActivityIndicator size="large" />
    </View>
  );
 
  // 渲染界面
  render() {
    return (
      <View style={styles.container}>
        <Button title="Load Data" onPress={this.fetchData} />
        { this.state.isLoading ? this.renderLoading() : (
          <FlatList
            data={this.state.data}
            keyExtractor={item => item.id}
            renderItem={this.renderItem}
          />
        )}
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  item: {
    margin: 8,
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  title: {
    fontSize: 18,
  },
  description: {
    fontSize: 12,
    color: '#666',
  },
  loading: {
    marginTop: 20,
  }
});

这个例子展示了如何在React Native应用中使用react-native-mysql库连接到MySQL数据库，并展示了如何从数据库中获取数据，然后使用FlatList组件来展示数据列表。同时，使用ActivityIndicator组件来在加载数据时显示一个loading指示器。这个例子简洁明了，并且包含了基本的错误处理。