css - 如何使用反应原生 css 实现与 2 个图标连接的破折号

问题描述

我对 react native 的 css 有问题，我不知道如何实现 2 图标与 dash 连接，真的不知道这在 react native 上叫什么，这是步进器吗？我已经有示例组件，主要问题是如何用图标实现这个破折号。

这是示例：

我的实际输出：

示例代码：

  <View style={{ justifyContent: 'flex-end', flex: 1, padding: 20 }}>
            <Card style={{ justifyContent: 'center', borderRadius: 20, elevation:4}}>
              <CardItem>
                  <Left>
                    <Body>
                      <View style={{flexDirection:'row', padding:20}}>

                          <View style={{flexDirection:'row'}}>

                                

                          </View>

                          <View style={{flexDirection:'column',flex:1}}>
                            <Text style={{alignSelf:'center', color:'#000', fontWeight:'bold', fontSize:17}} adjustsFontSizeToFit numberOfLines={2}>Pick Up Request {'\n'}</Text>
                           
                            <Item inlineLabel last>
                              <Text style={{fontSize:14}}>US Rt 11, Evans Mills NY 13637. 901 Route 110 </Text>
                            </Item>
                            <Text>{'\n'}</Text>
                            <Item inlineLabel last>
                              <Text style={{fontSize:14}}>Farmingdale NY 11735. 2400 Route 9{'\n'}</Text>
                            </Item>

                          </View>
                          
                      </View>

                      <View style={{flexDirection:'row'}}>
                         
                          <View style={{flexDirection:'row',flex:1, justifyContent:'space-around'}}>

                            <Button small primary title="Message"  >
                              <Text>Message</Text>
                            </Button>
                            <Button small warning title="Fetch" >
                              <Text>Fetch</Text>
                            </Button>
                            <Button small light title="Cancel"  >
                              <Text>Cancel</Text>
                            </Button>
                          </View>
                          
                      </View>

                    </Body>
                  </Left>
                </CardItem>
            </Card>
        </View>

标签： cssreactjsreact-native

工作示例：世博小吃

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

import { Card, CardItem, Item, Left, Body, Button } from 'native-base';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{ justifyContent: 'flex-end', flex: 1, padding: 20 }}>
        <Card
          style={{ justifyContent: 'center', borderRadius: 20, elevation: 4 }}>
          <CardItem>
            <Left>
              <Body>
                <View style={{ flexDirection: 'row', padding: 20 }}>
                  <View
                    style={{
                      flexDirection: 'column',
                      flex: 1,
                      justifyContent: 'space-between',
                    }}>
                    <View
                      style={{
                        position: 'absolute',
                        left: -25,
                        top: 50,
                        zIndex: 200,
                      }}>
                      <DotTrail />
                    </View>
                    <Text
                      style={{
                        alignSelf: 'center',
                        color: '#000',
                        fontWeight: 'bold',
                        fontSize: 17,
                      }}
                      adjustsFontSizeToFit
                      numberOfLines={2}>
                      Pick Up Request {'\n'}
                    </Text>

                    <Item inlineLabel last>
                      <Text style={{ fontSize: 14 }}>
                        US Rt 11, Evans Mills NY 13637. 901 Route 110{' '}
                      </Text>
                    </Item>
                    <Text>{'\n'}</Text>
                    <Item inlineLabel last>
                      <Text style={{ fontSize: 14 }}>
                        Farmingdale NY 11735. 2400 Route 9{'\n'}
                      </Text>
                    </Item>
                  </View>
                </View>

                <View style={{ flexDirection: 'row' }}>
                  <View
                    style={{
                      flexDirection: 'row',
                      flex: 1,
                      justifyContent: 'space-around',
                    }}>
                    <Button small primary title="Message">
                      <Text>Message</Text>
                    </Button>
                    <Button small warning title="Fetch">
                      <Text>Fetch</Text>
                    </Button>
                    <Button small light title="Cancel">
                      <Text>Cancel</Text>
                    </Button>
                  </View>
                </View>
              </Body>
            </Left>
          </CardItem>
        </Card>
      </View>
    </View>
  );
}

function DotTrail() {
  return (
    <>
      <Dot radius={10} color={'green'} />
      <View>
        <Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
        <Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
        <Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
      </View>
      <Dot radius={10} color={'red'} />
    </>
  );
}
function Dot({ color, radius, backgroundColor = null, margin }) {
  return (
    <View
      style={{
        width: radius * 2,
        height: radius * 2,
        borderWidth: 2,
        borderColor: color,
        borderRadius: radius,
        marginRight: 10,
        alignSelf: 'center',
        backgroundColor: backgroundColor,
        margin: margin,
      }}></View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    marginBottom: 3,
  },
});

css - 如何使用反应原生 css 实现与 2 个图标连接的破折号

问题描述

解决方案

推荐阅读