Question

我已经开始了一系列屏幕项目，每个屏幕都包含用户需要回答的问题。问题是从服务器中选择的，是动态创建的（答案的数量因一个问题而不同。）我使用“ react-native-progress-steps”类作为问题的容器。每个答案都是“ TouchableOpacity”，旁边带有“复选”图标。我的目标：当用户按下他想要的答案时，它会将旁边的“复选”图标的颜色更改为绿色。之后，它启用页面底部的“下一步”按钮（由“ react-native-progress-steps”类自动创建。最后，它添加了答案的分数（每个答案都有“得分”属性（其中的值与用户的总得分不同）。最后一步，我要获得用户的总得分。

我认为状态是我所有问题的答案，但我不知道如何正确使用它。

这是我的写法：

const BotQuestion = ({item}) => {
    return (
        <View key={item._id} style={{flex:1, position:'absolute', backgroundColor: 'white'}}>
            <View style={{flex:2, alignItems: 'center', justifyContent: 'center'}}>
                <Text>
                    {item.question}
                </Text>
            </View>
            <View style={{flex:3}}>
                {item.possibleAnswers.map((answer) =>
                    <View key={answer._id} style={{ flexDirection:'row', flex:1, paddingTop: 20 }}>
                        <AntDesign id={answer._id} name="check" size={24} color="black" style={{paddingLeft:20, flex: 1}}/>
                        <TouchableOpacity style={{flex: 6}} onPress={()=> answerPressed(answer._id)}>
                            <Text style={{height: 80}}>
                                {answer.answer}
                            </Text>
                        </TouchableOpacity>
                    </View>
                )}
            </View>
        </View>
    )
}

这是我创建的容器：

const BotGenerator = ({ navigation }) => {

    const { state, getBotQuest } = useContext(BotContext)

    useEffect(() => {
        getBotQuest()
    }, []);

    const defaultScrollViewProps = {
        keyboardShouldPersistTaps: 'handled',
        contentContainerStyle: {
            flex: 1,
            //justifyContent: 'center'
        }
    };

    const onSubmitSteps = () => {
        console.log('called on submit step.');
    };

    const progressStepsStyle = {
        activeStepIconBorderColor: '#686868',
        activeLabelColor: '#686868',
        activeStepNumColor: 'white',
        activeStepIconColor: '#686868',
        completedStepIconColor: '#686868',
        completedProgressBarColor: '#686868',
        completedCheckColor: '#4bb543',
        topOffset: -20
    };

    const buttonTextStyle = {
        color: '#686868',
        fontWeight: 'bold'
    };
    if (state[0] === undefined) {
        return <View><Text>Loading</Text></View>
    } else {
        let ProgressJSX = []
        let counter = 0
        for (let item of state) {
            counter = counter + 1
            ProgressJSX.push(
                <ProgressStep
                    key={item._id}
                    label={`Q #${counter}`}
                    scrollViewProps={defaultScrollViewProps}
                    nextBtnTextStyle={buttonTextStyle}
                    previousBtnTextStyle={buttonTextStyle}
                    onSubmit={onSubmitSteps}
                >
                    <View>
                        <BotQuestion item={item}/>
                    </View>
                </ProgressStep>
            )
        }
        return (
            <View style={{flex: 1, paddingTop: 80, paddingLeft:20, paddingRight:20, backgroundColor: 'white'}}>
                <ProgressSteps {...progressStepsStyle}>
                    {ProgressJSX}
                </ProgressSteps>
            </View>
        )
    }
}

One of my question as an example

如果有人可以帮助我，我很想

在React Native上动态处理状态时正确处理状态

0 个答案: