Реагировать на родную обрезанную границу

Question

Я новичок в React Native и пытаюсь создать вид, как показано на рисунке ниже.Можно ли создать полукруглый обрезанный вид границы, как выделено красным на прикрепленном изображении?

Answer 1

В React Native нет готового решения для этого, но я думаю, что самый простой способ - создать компонент, который вы используете в качестве разделителя, только для этой части:

Для этого вам нужен только родительский вид с серым фоном, 2 полукруга и вид с белым фоном, который оборачивает вид стилем с пунктирной рамкой

Answer 2

Я думаю, вы хотите что-то вроде этого .-------------- Использовал этот компонент для dash --- 'Reaction-native-dash'

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  Image,
  FlatList,
  AsyncStorage,
  TextInput,
  ActivityIndicator,
  ScrollView,
  ImageBackground
} from 'react-native';
import { ListItem, Left, Body, Right, Title } from "native-base";
import Dash from 'react-native-dash';

const window = Dimensions.get('window');

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

var localizedString;

type Props = {};
export default class App extends Component<Props> {

constructor(Props){
    super(Props);
  }
  render() {
    return (
    <View style={{flex:1, alignItems:'center', justifyContent:'center', backgroundColor:'grey'}}>

         <View style={{width:'80%', backgroundColor:'white', height:'100%', justifyContent:'space-between', flexDirection:'row', alignItems:'center', position:'absolute'}}>

        </View>

        <View style={{width:'95%', height:'100%', flexDirection:'row', alignItems:'center'}}>

          <View style={{height:50, width:50, backgroundColor:'grey', borderRadius:150}}>
          </View>

          <Dash style={{width:'75%', height:5}}/>

          <View style={{height:50, width:50, backgroundColor:'grey', borderRadius:150,}}>
          </View>


        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

});

Answer 3

Я думаю, что для этого потребуются некоторые умения css ... Может быть, вы можете получить пустой билет в качестве актива и использовать его в качестве фонового изображения для представления?https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

<ImageBackground 
            imageStyle={{ resizeMode: 'stretch'}} 
            style={{flex: 1,flexDirection: 'row', 
                justifyContent: 'space-between', 
                alignItems: 'center', 
                alignContent: 'center', 
                height: textEntryHeight, }} 
            source={
                highlightColor === 'magenta' || this.state.keyboardActive ? 
                textEntryHighlighted : textEntryNonHighlighted}
                >
                {textEntryHeight > 55 ? 
                <TextInput style={{
                        marginLeft: textEntryHeight > 55 ? 48 : 23,
                        color: 'white', 
                        fontSize: bodyFontSize, 
                        alignSelf: 'center',
                        width: '100%',

                    }} 
                    returnKeyType='done'
                    onSubmitEditing={Keyboard.dismiss}
                    ref='textInput'
                    autoFocus={this.props.openKeyboard}
                    value={body}
                    onChangeText={(text) => updateHomeTextInputContents(text)}
                    underlineColorAndroid={'transparent'}
                    selectionColor={'white'}
                    keyboardAppearance={'dark'}

                    onFocus={() => this.setState({keyboardActive:  true})}
                    onBlur={() =>  this.setState({keyboardActive: false})}
                    /> :
                 <Text style={{marginLeft: textEntryHeight > 55 ? 48 : 23,
                    color: 'white', 
                    fontSize: bodyFontSize, 
                    alignSelf: 'center'}}>
                    {body}
                </Text>
               }

                <TouchableOpacity style={{position: 'absolute', right: 0}} 
               onPress={iconOnPress}>
                    <Image style={{height: 70, width: 70, right:0}} source= 
               {icon}/>
                </TouchableOpacity>

            </ImageBackground>