Как смоделировать кнопку с иконками в react-native

я использую реагировать родной иконки пакет для включения значков с кнопками. У них есть пример кода, указанный в например папку. Я пытаюсь достичь onPress на вид, но оказывается, что react-native не имеет

9
ios javascript react-native reactjs

2 ответов

Если вы используете реагировать родной иконки модуль, вы можете попробовать обернуть значок и текст в виде, а затем использовать TouchableHighlight поверх него. Что-то вроде:

<TouchableHighlight onPress={()=>{}}>
     <View>
         <Icon ... />
         <Text ... />
     </View>
 </TouchableHighlight>

но это будет очень легко, если вы используете относительно новый модуль реагировать родной-вектор-иконки. Вы можете сделать так:

<Icon name="facebook" style={styles.icon}>
   <Text style={styles.text}>Login with Facebook</Text>
</Icon>
23

мне удалось сделать это так. Интересно, есть ли лучший способ.

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>
6