[英]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.