javascript - How to add a button in React Native? -
i´m confused whole "no css" thing, understand why it's beneficial. want place button in middle of screen don't understand how styling works in react yet. code:
var tapspeed = react.createclass({ render: function() { return ( <view style={styles.container}> <text style={styles.welcome}> tap me fast can! </text> <view style={styles.button}> ! </view> </view> ); } }); var styles = stylesheet.create({ container: { flex: 1, justifycontent: 'center', alignitems: 'center', backgroundcolor: '#ffcccc' }, welcome: { fontsize: 20, textalign: 'center', margin: 10 }, button: { textalign: 'center', color: '#ffffff', marginbottom: 7, border: 1px solid blue, borderradius: 2px } });
update: use built-in button component.
deprecated:
wrap view touchablehighlight ios , touchablenativefeedback android.
var { platform, touchablehighlight, touchablenativefeedback } = react; var tapspeed = react.createclass({ buttonclicked: function() { console.log('button clicked'); }, render: function() { var touchableelement = touchablehighlight; if (platform.os === 'android') { touchableelement = touchablenativefeedback; } return ( <view style={styles.container}> <text style={styles.welcome}> tap me fast can! </text> <touchableelement style={styles.button} onpress={this.buttonclicked.bind(this)}> <view> <text style={styles.buttontext}>button!</text> </view> </touchableelement> </view> ); } });
Comments
Post a Comment