Как я могу вставить в свой ящик эхо с полосами реагирующей навигации серым цветом под текстом?

Question

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

Моя треска:

    const DrawerNavigator = createDrawerNavigator({
    Example: ScreenExample
},
{
    contentComponent: CustomDrawerContentComponent,
    drawerWidth: width * 0.63,
    contentOptions: {
      activeTintColor: blue,
      inactiveTintColor: "rgb(105,105,104)",
      itemsContainerStyle: {
        textAlign: "center"
      },
      labelStyle: {
        fontFamily: "RobotoCondensed-Regular",
        fontWeight: "400",
        fontSize: 17,
        marginLeft: -5
      }
    },
    iconContainerStyle: {
      opacity: 1
    }
  }

const CustomDrawerContentComponent = props => (
  <SafeAreaView
    style={{ flex: 1, backgroundColor: white }}
    forceInset={{ top: "never" }}
  >
    <SafeAreaView style={{ flex: 0, backgroundColor: "rgb(63,103,149)" }} />
    <View
      style={{
        alignItems: "center",
        backgroundColor: "rgb(63,103,149)",
        shadowOpacity: 0.3,
        shadowOffset: {
          height: 5
        }
      }}
    >
      <Image
        source={require("./src/assets/Icon-Transparente.png")}
        style={{ height: 150, width: 150 }}
        resizeMode="contain"
      />
    </View>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
</View>
  </SafeAreaView>

Answer 1

Просто создайте один общий компонент, подобный этому,

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
export default class UnderlinedComponent extends React.Component {
  render() {
    return (
      <View style={{ borderWidth: 1, borderBottomColor: 'grey' }}>
        {this.props.children}
      </View>
    );
  }
}

и используйте его следующим образом,

<UnderlinedComponent> 
   <Text></Text>
</UnderlinedComponent >
<UnderlinedComponent> 
   <Button></Button>
</UnderlinedComponent >

, это просто создаст нижнюю границу, вы можете настроить ее согласнонужно.

и если вы не знаете, как использовать contentComponent в ящике.просто смотри это

Answer 2

Я нашел ответ, который искал, изучив по адресу: https: //reactnavigation.org/docs/en/drawer-navigator.html#contentoptions-for-draweritems. Я обнаружил, что внутри ящика есть свойство с именем itemStyle и использовать его следующим образом itemStyle: {borderBottomWidth: 0.5, borderBottomColor: grey}, добавив его к contentOptions Я могу создать строки под элементами:)