Сенсорная прозрачность BorderRadius не работает на Android - PullRequest
0 голосов
/ 02 ноября 2019

У меня есть тег TouchableOpactity внутри тега ImageBackground, который отлично работает с iOS, но свойство bordeRadius не работает на Android для тега TouchableOpactity.

import React, { Component } from "react";
import { 
    Text,
    StyleSheet,
    TextInput,
    TouchableOpacity,
    TouchableHighlight,
    ImageBackground,
    SafeAreaView,
    Dimensions,
    StatusBar
} from "react-native";

import NetInfo from "@react-native-community/netinfo";

import {appColor} from '../../Utils/Colors';
import {MOBILE_NUMBER_HINT,VERIFY_OTP, NO_INTERNET} from '../../Utils/Strings';
import BaseUrl from '../../Utils/ApiClient';
import { TextInputLayout } from "rn-textinputlayout";

import {S} from '../../Utils/Dimen';
import {button} from '../../customComponent/GlobalStyleSheet';
import AsyncStorage from "@react-native-community/async-storage";
import { USER_NAME } from "../../Utils/AsynStorageKey";


export default  class ForgotPassword extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isConnected: false,
            phoneNumber: null,
            forgotPassword: ''
        }
    }

    componentDidMount = async () => {
        await NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange)
    }

    handleConnectionChange = async (isConnected) => {
        await this.setState({isConnected});
    }

    forgotPassWord = () => {
        if(this.state.phoneNumber !== null || this.state.phoneNumber === '') {
            AsyncStorage.setItem(USER_NAME, this.state.phoneNumber)
            if(this.state.isConnected) {
                let data = {
                    method: 'POST',
                    credentials: 'same-origin',
                    mode: 'same-origin',
                    body: JSON.stringify({
                        'mobileNumber': this.state.phoneNumber,
                    }),
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json'
                    }
                }
                fetch(BaseUrl + 'resendOtp', data)
                .then((response) => response.json())
                .then((responseJson) => {
                    console.log(responseJson)
                    this.props.navigation.navigate('OtpVerification',{forgotPassword: 'Y'})
                })
                .catch((error) => {
                    console.log(error)
                })
            } else {
                alert(NO_INTERNET)
            }
        } else {
            alert('Phone number is mandatory')
        }
    }
    render() {
        return (
            <ImageBackground 
            source={require('../../assets/app_background.jpg')}
            style={{flex:1, backgroundColor: '#fff'}}>
                <StatusBar
              barStyle="light-content"
              backgroundColor={appColor}
                />

                <SafeAreaView 

                style={{width: Dimensions.get('window').width}}>

                    <TextInputLayout
                        hintColor={appColor}
                        focusColor={appColor}
                        style={styles.inputLayout}>
                            <TextInput
                                style={styles.textInput}
                                placeholder={MOBILE_NUMBER_HINT}
                                onChangeText={(phoneNumber)=>{this.setState({phoneNumber})}}
                                keyboardType={'number-pad'}
                                returnKeyType='done' />
                    </TextInputLayout>
                    <TouchableOpacity
                     style={styles.roundedButton}
                        onPress={this.forgotPassWord}
                       >
                            <Text style={styles.text}>{VERIFY_OTP}</Text>
                    </TouchableOpacity>
                </SafeAreaView>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: '100%', 
    },
    textInput: {
        fontSize: 16,
        height:40
    },
    inputLayout: {
        marginTop: 8,
        marginHorizontal:16,
    },
    roundedButton: {
        backgroundColor: appColor,
        alignSelf: 'center', 
        padding: 8,
        marginTop: 30,
        width:'40%',
        borderRadius: 35

    }, 
    text: {
        fontSize: S, 
        color: 'white', 
        textAlign:'center'
    }
});
...