React Native初探: http://www.jb51.cc/article/p-wtukbzxm-bob.html
RN内置了Touchable*
可用来生成按钮。例如:
<TouchableHighlight onPress={this._onPressButton}> <Text>Button1</Text> </TouchableHighlight>
就差自定义样式了。
1、react-native-button库
https://github.com/ide/react-native-button 里做了简单的封装。
npm install react-native-button --save
代码示例:
import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Text,View,TouchableHighlight } from 'react-native'; import Button from 'react-native-button'; class MyReactNativeProject extends Component { _onPressButton() { console.log("You tapped the button!"); } _onPressButton2() { console.log('Pressed!'); } render() { return ( <View style={styles.container}> <TouchableHighlight onPress={this._onPressButton}> <Text>Button1</Text> </TouchableHighlight> <Button style={{fontSize: 20,color: 'green'}} styleDisabled={{color: 'red'}} onPress={() => this._onPressButton2()}> Button2 </Button> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},}); AppRegistry.registerComponent('MyReactNativeProject',() => MyReactNativeProject);
效果图:
2、react-native-awesome-button库
这个更像按钮。