react-native - 如何设计 React-Native 按钮

Question

我是 react-native 的新手，我想设计这样一个按钮，我尝试并搜索但找不到答案

任何帮助，将不胜感激

标签： react-native

Answer 1

看看这个方法，使用 radiusBorder 你可以实现接近你正在寻找的东西：

 import React from 'react';
 import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';

 export default function NAME() {
   return (
     <TouchableOpacity>
      <View style={styles.wrapperContainer}>
        <View style={styles.Container}>
          <Text>Foo</Text>
        </View>
      </View>
     </TouchableOpacity>
   );
 }

const styles = StyleSheet.create({
    Container: {
      height: 50,
      width: 100,
      alignItems: 'center',
      background: '#1f90f0',
      borderRadius: 5,
      justifyContent: 'center',
      borderTopLeftRadius: 50,
      borderLeftWidth: 2,
      borderLeftColor: 'lightgray'
    },
  wrapperContainer: {
      background: 'lightgray',
      width: 100,
   }
});