[英]How to model a button with icons in react-native
我正在使用react-native-icons包来包含带有按钮的图标。 他们在示例文件夹中列出了示例代码。 我正在尝试在 View 上实现onPress
,但结果是 react-native 没有<View>
组件的onPress
功能。
我尝试使用<TouchableHighlight>
但它只能有一个子元素,而不是像<Icon>
和<Text>
这样的两个子元素。
我还尝试将<Text>
与<Icon>
和<Text>
,但<Text>
只能在其中包含<Text>
元素。
有没有人有运气实现类似的功能?
<View onPress={this.onBooking}
style={styles.button}>
<Icon
name='fontawesome|facebook-square'
size={25}
color='#3b5998'
style={{height:25,width:25}}/>
<Text style={styles.buttonText}>Sign In with Facebook</Text>
</View>
如果您使用的是react-native-icons模块,您可以尝试将图标和文本都包裹在一个视图中,然后在它上面使用 TouchableHighlight。 就像是:
<TouchableHighlight onPress={()=>{}}>
<View>
<Icon ... />
<Text ... />
</View>
</TouchableHighlight>
但是,如果您使用相对较新的模块react-native-vector-icons ,这将非常容易。 你可以这样做:
<Icon name="facebook" style={styles.icon}>
<Text style={styles.text}>Login with Facebook</Text>
</Icon>
我设法这样做了。 我想知道是否有更好的方法。
var styles = StyleSheet.create({
btnClickContain: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
alignSelf: 'stretch',
backgroundColor: '#009D6E',
borderRadius: 5,
padding: 5,
marginTop: 5,
marginBottom: 5,
},
btnContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
alignSelf: 'stretch',
borderRadius: 10,
},
btnIcon: {
height: 25,
width: 25,
},
btnText: {
fontSize: 18,
color: '#FAFAFA',
marginLeft: 10,
marginTop: 2,
}
});
<TouchableHighlight
onPress={this.onBooking} style={styles.btnClickContain}
underlayColor='#042417'>
<View
style={styles.btnContainer}>
<Icon
name='fontawesome|facebook-square'
size={25}
color='#042'
style={styles.btnIcon}/>
<Text style={styles.btnText}>Sign In with Facebook</Text>
</View>
</TouchableHighlight>
Expo 有一个Button
组件,可以执行您想要的操作、样式和所有操作:
<FontAwesome.Button name="facebook" backgroundColor="#3b5998" onPress={...}>
Sign in with Facebook
</FontAwesome.Button>
<FontAwesome.Button name="twitter" backgroundColor="#1da1f2" onPress={...}>
Sign in with Twitter
</FontAwesome.Button>
在 iOS 模拟器中运行的样子:
如果您不使用Expo ,请研究源代码并创建一个类似的组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.