时间戳

首页 > 解决方案 > 无法将样式应用于 react-native-progress-steps

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

问题描述

我一直在尝试将样式应用于 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

标签： reactjsreact-nativestylingreact-native-progress-steps

解决方案

其实很简单。

您必须创建一个常量并在谁是锁定 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 }}>

推荐阅读