Question

我是React Native的新手，我正在尝试创建一个视图，如下图所示。是否可以在附加图像中以红色突出显示半圆形裁剪边框视图？

Answer 1

我认为这需要一些css wizardery ...也许你可以将空白票作为资产并将其作为视图的背景图像？ 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>

Answer 2

React Native中没有开箱即用的解决方案，但我认为最简单的方法是创建一个用作分隔符的组件，仅用于此部分：

为此，您只需要一个带有灰色背景的父视图，2个半圆圈和一个带有白色背景的视图，该视图用虚线边框样式包裹视图

Answer 3

我想你想要这样的东西.-------------- 将此组件用于破折号---＆＃39; react-native-dash＆＃39;

/**
 * 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({

});

React Native裁剪边框

3 个答案: