React-nativeナビゲーションの進行状況バー

Question

私はReact-nativeを初めて利用しています。添付画像のような進行状況バーでヘッダーメニューを作成する方法を教えてください。どんなアドバイスをいただければ幸いです...

私は進歩を遂げましたが、どのように各ステップの間にスペースを取り除くことができますか？

<View style={styles.stepIndicatorBox}> 
     {stepsIds.map((step, idx) => { 
     const words = steps[step].split(' '); 
     const activeStepStyle = step === activeStep && styles.activeStep; 
     return (
      <View key={`${step}${idx}`}> 
      <Svg height="25" width="100"> 
       <Line 
       x1="10" 
       y1="10" 
       x2="100" 
       y2="10" 
       stroke={theme.colors.blue} 
       strokeWidth="2" 
       /> 
       <Circle 
       cx="50" 
       cy="10" 
       r="3" 
       stroke={theme.colors.blue} 
       strokeWidth="2.5" 
       fill={theme.colors.lightBlue} 
       /> 
      </Svg> 
      {words.map(w => 
       <Text style={[styles.stepName, activeStepStyle]}> 
       {w} 
       </Text> 
      )} 
      </View> 
     ); 
     })} 
    </View> 

私のスタイルは、次のとおりです。

const styles = StyleSheet.create({ 
    sceneContainer: { 
    bottom: 0, 
    left: 0, 
    position: 'absolute', 
    right: 0, 
    top: 0, 
    }, 
    stepIndicatorBox: { 
    height: theme.utils.em(4), 
    flexDirection: 'row', 
    alignItems: 'center', 
    justifyContent: 'space-between', 
    backgroundColor: theme.colors.lightBlue, 
    paddingHorizontal: theme.metrics.mainPadding, 
    }, 
    activeStep: { 
    ...theme.fontStyles.smallBold, 
    color: theme.colors.activeStepName, 
    fontWeight: 'bold', 
    }, 
    stepName: { 
    ...theme.fontStyles.small, 
    color: theme.colors.blue, 
    textAlign: 'center', 
    }, 
}); 

Answer 1

私は次のコードとreact-native-svgを使用：

_renderStepIndicator =() => { 
     const { navigation } = this.props; // {dispatch} 
     const { steps, getStep } = stepsOptions; 

     const route = navigation.state.routes[navigation.state.routes.length - 1]; 
     const activeStep = getStep(route.routeName); 
     const stepsIds = Object.keys(steps); 
     const { height, width } = Dimensions.get('window'); 

     const stepWidth = width/5; 

     const RouteComponent = StepIndicatorRouter.getComponentForRouteName(
     route.routeName 
    ); 

     if (RouteComponent.navigatorType === STEP_INDICATOR) { 
     return null; 
     } 

     return (
     <View style={styles.stepIndicatorBox}> 
      {stepsIds.map((step, idx) => { 
      const words = steps[step].split(' '); 
      const activeStepStyle = step === activeStep && styles.activeStep; 

      return (
       <View key={`${step}${idx}`} style={styles.stepIndicatorStep}> 
       <Svg height="25" width={stepWidth}> 
        <Line 
        x1="0" 
        y1="15" 
        x2={stepWidth} 
        y2="15" 
        stroke={theme.colors.blue} 
        strokeWidth="2" 
        /> 
        <Circle 
        cx="40" 
        cy="15" 
        r="3" 
        stroke={theme.colors.blue} 
        strokeWidth="2" 
        fill={ 
         step === activeStep 
         ? theme.colors.blue 
         : theme.colors.lightBlue 
        } 
        /> 
       </Svg> 
       {words.map(w => 
        <Text style={[styles.stepName, activeStepStyle]}> 
        {w} 
        </Text> 
       )} 
       </View> 
      ); 
      })} 
     </View> 
    ); 
    };