从React Native,Flutter到小程序基本控件

在React Native, Flutter和微信小程序中，实现相同的基础控件可能会有所不同。以下是在这三个平台中创建按钮的基本示例。

React Native:

import React from 'react';
import { Button, View, StyleSheet } from 'react-native';
 
const App = () => (
  <View style={styles.container}>
    <Button title="Press Me" onPress={() => alert('Button Pressed!')} />
  </View>
);
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 
export default App;

Flutter:

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RaisedButton(
            onPressed: () => print('Button Pressed!'),
            child: Text('Press Me'),
          ),
        ),
      ),
    );
  }
}

微信小程序:

<button open-type="getUserInfo" bindgetuserinfo="onButtonTap">按钮</button>

Page({
  onButtonTap: function() {
    console.log('Button Pressed!');
  }
});

这些示例展示了如何在不同平台上创建一个基本的按钮，它们都会在屏幕中心显示，并且在用户点击时执行一个简单的操作（如在控制台打印一条消息）。