Question

我正在为古兰经构建Mushaf App。我做了所有事情，但我面临一些挑战并寻求帮助

第一个我必须通过JSON响应进行映射才能显示类似于书籍的文本，因此，如果将其映射到render函数之外，则无法在render函数内部管理文本样式它就像列表而不是书本上的文字（我是说一行一行地来）。因此，如何在render函数中完成它，以便我可以控制它的样式，如果我将所有逻辑添加到函数本身中，则会收到此错误Cannot Add a child that doesn't have a YogaNode to a parent with out a measure function

第二个我是通过Surah列表导航页面编号的用户，然后如何通过扫掠或轻松地更改行来轻松更改Surah列表，以便用户可以自由浏览页面< / p>

第三个我无法使页面中的文字完全合理

import React, {useState, useEffect} from 'react';
import {View, 
        Text, 
        StyleSheet, 
        TouchableOpacity, 
        ImageBackground, 
        Dimensions,
        Image
    } from 'react-native';
import QuranApi from '../API/QuranApi';
import {Audio} from 'expo-av';
import Uthmani from '../Fonts/Uthmani';
import { ArabicNumbers } from 'react-native-arabic-numbers';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
const QuranShowScreen = ({navigation}) => {
    const [quran, setQuran] = useState([]);
    const page = navigation.getParam('page');
    const name = navigation.getParam('name');

   useEffect(() => {
     Quran();
   }, []);
    const sound = new Audio.Sound();


    const Quran = async () => {
        const response = await QuranApi.get(`/${page}/quran-uthmani`);
        setQuran(response.data.data.ayahs);
   }

      const text =  quran.map((t) => {

        return (
            <Text
            onPress = {async () => {
                await sound.loadAsync({
                    uri : `https://cdn.alquran.cloud/media/audio/ayah/ar.alafasy/${t.number}`
                });
                await sound.playAsync();
               }}
               onLongPress = {async () => {
                await sound.unloadAsync();
               }}
                key = {t.text}
            >
            {
                t.text.includes(`بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ`) ? 

                `
                 بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ                       
${t.text.replace('بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ', '')}` : `${t.text.replace('بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ', '')} ﴿${ArabicNumbers(t.numberInSurah)}﴾ `
            }
             </Text>
        )
    })


    return (
        <View style = {{marginHorizontal : 25}}>
        <View style = {styles.container}>        
        <Uthmani text = {text} />

        </View>
        </View>

    );
}



const styles = StyleSheet.create({
    container : {
        marginTop : 15,    
        marginHorizontal : 15,
        flex : 1,
        alignContent : 'center'
    },


     textStyle : {
 fontFamily : 'Uthmani',
          fontSize : 21,
          textAlign : 'justify',
          alignSelf : 'center',
          lineHeight :
        }
    });



export default QuranShowScreen;

如何管理渲染功能之外的组件？

0 个答案: