无法将样式应用于 react-native-progress-steps答案

【问题标题】：Unable to apply styling to react-native-progress-steps无法将样式应用于 react-native-progress-steps
【发布时间】：2021-03-10 23:13:53
【问题描述】：

我一直在尝试将样式应用于 react-native-progress-steps，但它在我的应用程序中不起作用。我将样式应用于View 和ProgressSteps 组件，但它没有显示在我的应用程序中。

      <View style={{flex: 1}}>
    <ProgressSteps style={styles.progressStepsStyle}>
        <ProgressStep label="Information">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 1!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Account">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 2!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Completion">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 3!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Verification">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 4!</Text>
            </View>
        </ProgressStep>
    </ProgressSteps>
    </View>
    </View>

这里是图书馆的链接：https://www.npmjs.com/package/react-native-progress-steps

【问题讨论】：

文档说你必须通过 nextBtnStyle、nextBtnTextStyle、previousBtnStyle 和 previousBtnTextStyle 属性来提供样式，而不是通常的样式属性。
非常感谢您的回复。实际上，我现在并不想在按钮上工作，我正在尝试在圆圈上工作。

标签： reactjs react-native styling react-native-progress-steps

【解决方案1】：

其实很简单。

您必须创建一个常量并在谁是锁定 ProgressStep 的爸爸。

例如：

  const progressStepsStyle = {
    activeStepIconBorderColor: '#0a0d64',
    activeLabelColor: '#0a0d64',
    activeStepNumColor: 'white',
    activeStepIconColor: '#0a0d64',
    completedStepIconColor: '#0a0d64',
    completedProgressBarColor: '#0a0d64',
    completedCheckColor: 'white'
  };

然后调用它：

    <ProgressSteps  {...progressStepsStyle}>
        <ProgressStep label="Information">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 1!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Account">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 2!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Completion">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 3!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Verification">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 4!</Text>
            </View>
        </ProgressStep>
    </ProgressSteps>

因此，您的圈子和进度条中都会有样式。

如果您想设置按钮和按钮文本的样式，您必须在其中放置以下属性 nextBtnStyle、nextBtnTextStyle、previousBtnStyle 和 previousBtnTextStyle。

例如：

<ProgressStep nextBtnText={"Next"} nextBtnStyle={{ textAlign: 'center', padding: 8, backgroundColor: '#F8CC23', }} nextBtnTextStyle={{ color: '#007aff', fontSize: 18 }}>

【讨论】：