React Native 怎么设计这个按钮？答案

【问题标题】：React Native how to design this button?React Native 怎么设计这个按钮？
【发布时间】：2020-04-14 04:48:16
【问题描述】：

我需要帮助在 react-native 中设计这个按钮。请帮帮我？

【问题讨论】：

我的朋友，你必须添加你的代码并解释你的问题

【解决方案1】：

我会帮你解决这个问题。但请了解提问的程序。在提出问题之前应该进行一些初步工作并进行尝试。因为我知道你是一个新的贡献者，我也犯过这样的错误。所以我在帮你。

您可以参考以下代码来实现：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.btnContainer}>
          <View style={styles.btnLabelStyle}>
            <Text>adfadafd</Text>
          </View>
          <View style={styles.leftIcon} >
            <Text style ={{color : '#0a6df0', fontSize:25, fontWeight:'bold'}}>+</Text>
          </View>
          <View style={styles.rightIcon}>
            <Text style={{ color: 'white' }}>{'>'}</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'grey',
    padding: 8,
    alignItems: 'center',
  },
  btnContainer: {
    width: '70%',
    height: 40,
    justifyContent: 'center',
    borderRadius: 8,
    paddingRight: 20,
    backgroundColor: 'white',
    borderColor:'green',
    borderWidth:1,
  },
  leftIcon: {
    backgroundColor: 'white',
    width: 40,
    height: 40,
    alignItems:'center',
    justifyContent:'center',
    position: 'absolute',
    left: -10,
    borderColor:'#0a6df0',
    borderWidth:1,
    borderRadius: 20,
  },
  rightIcon: {
    backgroundColor: 'green',
    alignItems: 'center',
    width: 20,
    height: 20,
    position: 'absolute',
    right: -9,
    borderRadius: 20,
  },
  btnLabelStyle:{
    marginLeft:40, //lefticon width
    marginRight:20, // right icon width
  }
});

你也可以用这个世博小吃here

【讨论】：