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

Question

我正在使用 react-native-icons package to include icons with buttons. They have a sample code listed in example folder。我试图在 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>

Answer 1

我设法做到了这一点。请问有没有更好的办法

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>

Answer 2

如果您使用的是 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>

Answer 3

Expo has a 一个 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，请研究源代码并创建一个类似的组件。

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

How to model a button with icons in react-native

jsx

reactjs

react-native