Как я могу создать пользовательский интерфейс со стрелкой реагировать родной?

Question

Я хочу создать пользовательский интерфейс, как на картинке ниже.

Как я могу это реализовать? У любого есть идея для этого. Пожалуйста, помогите мне. Спасибо

Answer 1

Вот рабочая Демонстрация

Как и в ответе @pds, вам нужно сделать компонент стрелки абсолютным, чтобы расположить его над телом сообщения.

ИспользованиеCSS треугольник и абсолютное позиционирование вы можете получить рабочую демонстрацию.

Answer 2

Вот несколько библиотек, которые помогут вам достичь всего вашего пользовательского интерфейса:

• треугольник: https://github.com/Jpoliachik/react-native-triangle

• просмотр списка времени: https://github.com/thegamenicorus/react-native-timeline-listview
• тема графика времени: https://github.com/tomzaku/react-native-timeline-theme

Answer 3

Да. Вы можете создать эту стрелку с помощью позиции: «абсолютное» свойство css. Попробуйте реализовать приведенный ниже код!

     <View style={{ marginTop: 10, marginHorizontal: 15 }}>
      <View style={{ position: 'relative' }}>
        <View style={{ borderWidth: 1, padding: 5, backgroundColor: '#e5f8ff', borderColor: '#007299'  }}>
          <Text>Top Note</Text>
        </View>
        <View style={{ position: 'absolute', top: 9, left: -5 }}>
          <View style={{ borderBottomWidth: 1, borderLeftWidth: 1 ,backgroundColor: '#e5f8ff', borderColor: '#007299', width: 10, height: 10, transform: [{ rotate: '45deg'}] }}>

          </View>
        </View>
      </View>
    </View>

проверьте это изображение