reactjs - 如何在 react-native 中为带有图标的按钮建模

Question

我正在使用 react-native-icons包含带有按钮的图标的包。他们在 example folder 中列出了示例代码.我正在努力实现 onPress在 View 上，但结果是 react-native 没有 onPress <View> 的功能组件。

我尝试使用 <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>

Answer 1

如果您使用 react-native-icons模块，您可以尝试将图标和文本包装在一个 View 中，然后在其上使用 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>