Реагировать на собственную проблему стиля пользовательских кнопок

Question

Я проектирую пользовательскую кнопку в реагировать родной через TouchableOpacity. До сих пор я пробовал разные стилистические подходы, но не получил требуемый дизайн. ниже упоминается моя попытка решить.

<TouchableOpacity style={styles.numericButton}>
      <View>
          <Text style={styles.numericButtonText}>1</Text>
      </View>
</TouchableOpacity>


const styles = StyleSheet.create({

    numericButton: {
        margin:10,
        padding:10,
        backgroundColor:'#D3D3D3',
        borderColor:'#000',
        borderWidth:2,
        borderRadius:5,
        elevation:10,
        shadowOffset: { width: 5, height: 5 },
        shadowColor: "black",
        shadowOpacity: 1,
        shadowRadius: 5,

    },
    numericButtonText:{
        fontSize:24,
        fontWeight:'bold',
        fontFamily:'Cochin'
    }
});

результат:

Я хочу стилизовать мою реагирующую кнопку

Answer 1

Мы можем добиться того же типа кнопки с реагировать-родной-линейный градиент

было достигнуто с помощью:

            <TouchableOpacity>
                <LinearGradient
                    // start={{x: 0.5, y: .5}} end={{x: 1, y: 1.0}}
                    style={styles.button}
                    locations={[0.3, 0, 0]}
                    colors={['#A8AFB5', 'white', 'white']}
                >
                     <Text style={styles.buttonText}>{props.data}</Text>
                </LinearGradient>
            </TouchableOpacity>




 const styles = StyleSheet.create({

    button: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 5, width: null, height: 81,marginTop:5, borderWidth: 1 },
    buttonText: {
        //textAlign:'center',
        fontSize: 24,
        fontWeight: 'bold',
        fontFamily: 'Cochin',
        color: 'black'
    }
});

Answer 2

Используйте следующий стиль и используйте больше градиента, чтобы установить цвета, соответствующие дизайну и проверить отраженные изменения

 numericButton: {
        alignItems: 'center',
        margin: 10,
        padding: 10,
        backgroundColor: '#D3D3D3',
        borderColor: '#000',
        borderWidth: 2,
        //borderRadius:5,
        elevation: 5,
        shadowOffset: { width: 5, height: 5 },
        shadowColor: 'grey',
        shadowOpacity: 1,
        shadowRadius: 5,
      },
      numericButtonText: {
        fontSize: 24,
        fontWeight: 'bold',
        fontFamily: 'Cochin',
      },

Тебе хорошо идти!