Flutter 与react-native创建可复用的组件对比示例

react-native中创建可复用组件

class CustomCard extends Component{
     reder(){
    return(
      
                Card{this.props.index}
                
            
    )
  }
}

//use

在flutter中创建可复用组件

import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {
  CustomCard({@required this.index, @required this.onPress});
  final int index;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          Text('Card $index'),
          FlatButton(
            child: Text('Press'),
            onPressed: this.onPress,
          )
        ],
      ),
    );
  }
}


class CustomCardList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomCard(index: 1, onPress: (){
      print(11);
    });
  }
}

总结

对比react-native中个人感觉flutter上手起来并不难,在布局方面很多东西都和前端思想类似,在语言特性方面Dart也是比较强大的,集百家之长,对比js写起来也是相当灵活和更加严谨。