Как я могу добиться дизайна ниже в react native?

#reactjs #react-native

Вопрос:

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

Мой код здесь,

 <View style={{flex: 1, backgroundColor: '#fff', alignItems: 'center'}}>
        <View style={{backgroundColor: 'rgb(25,195,192)', width: '100%', height: '40%', borderBottomLeftRadius: 100, borderBottomRightRadius: 100}}>
        </View>
</View>

Я еще не добавил текст, но я хочу, чтобы граница была изогнута, как изображение, и это не получается.

Любая помощь будет оценена.

1. Я думаю, например, вы можете поместить <Image> внутри <TouchableOpacity> . Тогда у вас может быть изображение, подобное вашему, и к нему можно прикоснуться для запуска функций

2. нет, я хочу сделать view что-то вроде вместо image @NaeimFard

Ответ №1:

Вы можете добиться такого дизайна кривой с помощью SVG. SVG предоставляет несколько элементов и их свойства (прямоугольник, Круг, линия, полилиния, многоугольник, G и т. Д.). Вы можете настроить дизайн в соответствии с вашими потребностями.

https://www.npmjs.com/package/react-native-svg?activeTab=versions

 import Svg,{ Circle } from 'react-native-svg';


<Circle 
       cx={screenWidth / 2}
       cy={`-${898 - headerHeight   2}`} 
       r="898.5" fill="#87ceeb"
       stroke="#87ceeb" 
      strokeWidth="2" 
/>

Ответ №2:

Используйте следующий стиль для вашего изогнутого вида,

 curvedViewStyle: {
    borderRadius: window.width,
    width: window.width * 2,
    height: window.width * 2,
    marginLeft: -(window.width / 2),
    position: "absolute",
    bottom: 0,
    overflow: "hidden",
    backgroundColor: "red"
  },

и не забудьте добавить «окно» сверху, const window = Dimensions.get("window");

1. но мне нужна только верхняя часть 30% @Jebin

2. Изменив стиль, вы тоже можете этого добиться.

3. я не могу получить то же самое

4. Или вы можете посмотреть это: github.com/react-native-community/react-native-svg#readme , И используйте circle. <Circle cx={screenWidth / 2} cy ={ -${898 - headerHeight 2} } r=»898.5″ fill=»#EFF2F3″ stroke=»#C5CACD» strokeWidth=»2″ />

5. получение ошибки в библиотеке Unable to resolve “./patternReg” from "node_modulesreact-native-svglibextractextractProps.js

Ответ №3:

Чтобы получить круг, вам нужно создать квадрат (ширина === высота) и установить borderRadius равным половине его ширины или высоты.

В вашем случае; вам нужно вычислить значение для отображения только 30% нижней стороны (используйте отрицательный marginTop), а также вычислить, как значение для обеспечения того, чтобы центр круга совпадал с центром ширины экрана (используйте отрицательный marginLeft). Ниже приведен пример этого.

 render() {
    return (
      <View style={myStyle.container}>
        <View style={myStyle.top_background}>
          <View style={myStyle.top_content}>
            <Text style={myStyle.text1}>Hey there</Text>
            <Text style={myStyle.text1}>WHAT'S UP</Text>
            <Text style={myStyle.text1}>Doc'?</Text>
            <Text style={myStyle.text2}>BUGS BUNNY</Text>
          </View>
        </View>
      </View>
    );
}

и таблица стилей

 const sWidth  = Dimensions.get('window').width;
const sHeight = Dimensions.get('window').height;
const ratio   = sWidth / sHeight; //sWidth = ratio * sHeight
const myStyle = StyleSheet.create({
  container: {
    width: sWidth,
    height: sHeight,
    backgroundColor: '#fff'
  },
  top_background: {
    width: sHeight * 2,
    height: sHeight * 2,
    borderRadius: sHeight * 1,
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    backgroundColor: '#aaa',
    alignItems: 'center',
    marginLeft: ((ratio * sHeight) * 0.5) - (sHeight),
    marginTop: -sHeight * 1.7,
    paddingTop: sHeight * 1.7,
  },
  top_content: {
    paddingTop: sHeight * 0.02,
    width: sWidth,
    height: sHeight * 0.3,
    alignItems: 'center',
  },
  text1: {
    fontSize: 14,
    color: '#fff'
  },  
  text2: {
    marginTop: sHeight * 0.1,
    fontSize: 25,
    fontWeight: 'bold',
    color: '#fff'
  }
});

marginTop и paddingTop в top_background предназначены только для использования верхних 30% экрана и запускают содержимое в разделе, который можно увидеть на экране соответственно.