React native 未应用样式（expo）

我是一个新的本地人，我试图写一个应用程序，但我有一个奇怪的问题。 当应用程序加载到expo中，我导航到屏幕A或屏幕B时，我看不到应用于它们的样式。 也就是说，如果我进入代码编辑器并在屏幕A的代码上按save，然后在应用程序中我突然看到应用于屏幕A的样式，然后当我在屏幕B的代码上按save时，我看到应用于屏幕B的样式，但当我再次回到屏幕A时，我看不到应用于它的任何样式

有人知道为什么会发生这样的事情吗

这是我的密码：

屏幕A：

import React, { useState, useEffect, Component, useReducer } from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Button  } from 'react-native';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import getTicketAnalysis from "../api/TicketAnalysis"
import TicketAnalysis from '../api/TicketAnalysis';
import { set } from 'react-native-reanimated';




const TestValue = (props) => {

    const dateTimeObject = new Date();
    const current_date = dateTimeObject.toISOString().slice(0, dateTimeObject.toISOString().indexOf("T"));
    const current_time = dateTimeObject.toLocaleTimeString().slice(0,5);
    const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
    const [chosenStartingTime, setStartingTime] = useState(current_time);
    const [choseStartingnDate, setStartingtDate] = useState(current_date);
    const [chosenEndingTime, setEndingTime] = useState(current_time);
    const [choseEndingnDate, setEndingDate] = useState(current_date);
    const [isStartingInfoChoosen, setStartingOption] = useState(false);
    const [response, setResponse] = useState({response:'', description:'', percent:-1, supplied_information:{request_route:'',supplied_params:{latitude:'',longitude:'',date:'',start_time:'',end_time:''}}});
    const [ isPercentDisplayed, setIsPercentDisplayed] = useState(false);
    //const [choosingEndingInfo, setEndingInfo] = useState(false);
    const [ showOtherResults, setShowOtherResults] = useState(false);



    let lon_fromScreen = props.navigation.getParam('longitude',{});
    let lat_fromScreen = props.navigation.getParam('latitude',{});
    let action = props.navigation.getParam('action',{});
    let requestInfo = {};
    let postInfo = {};
    let buttoToDisplay = '';



    if(action == 'getInfo')
    {
      if(response.supplied_information.request_route == '/gta' ||response.supplied_information.request_route == '' || showOtherResults == false)
      {
        buttoToDisplay ="Get Ticket Anylysis information";
      }
      else
      {
        buttoToDisplay = "null";
      }
    }
    else
    {
      buttoToDisplay = "Post Ticket Anylysis information";
    }

    const setRequestInfo = (i_Route)=>{
      const display = true;
      if (i_Route == "gta")
      { 
        requestInfo = {latitude:lat_fromScreen , longitude:lon_fromScreen , date: choseStartingnDate , start_time: chosenStartingTime  , end_time : chosenEndingTime};
      }
      else
      {
        requestInfo = {latitude: response.supplied_information.supplied_params.latitude , longitude: response.supplied_information.supplied_params.longitude   , date: response.supplied_information.supplied_params.date , start_time: response.supplied_information.supplied_params.start_time  , end_time : response.supplied_information.supplied_params.end_time, current_location_result:response.percent };
        
      }

      getTicketAnalysis(i_Route);
      setIsPercentDisplayed(display);

    };

    const setPostInfo = () => {
      postInfo = {latitude:lat_fromScreen , longitude:lon_fromScreen , date: choseStartingnDate , time: chosenStartingTime};
      postTicketAnalysis();
    }
  
    const postTicketAnalysis = async () => {

      try{
      const post_response = await TicketAnalysis.post('/report', postInfo);
      const temporary_response = `server description:\n ${post_response.data.description}\n\n server response: ${post_response.data.response}`;
      setResponse(post_response.data);
      }catch(err){
        const err_message = {response:"404 Bad", decription:"network error occurred"};
        setResponse(err_message);
      }
    }

    const getTicketAnalysis = async (i_Route)=>{
     const showOtherResultsButton = true;


      try{
      const get_response = await  TicketAnalysis.get(`/${i_Route}`, {params: requestInfo});
      setResponse(get_response.data);
      setShowOtherResults(showOtherResultsButton);
      }catch(err){

        const err_message = {response:"404 Bad", decription:"network error occurred", percent: -1};
        setResponse(err_message);
      }

    };

    

    const showDatePicker = () => {
      const value = true;
        setDatePickerVisibility(value);
      };
     
      const hideDatePicker = () => {
        const showOtherResultsButton = false;
        setDatePickerVisibility(false);
        setShowOtherResults(showOtherResultsButton);
      };
     
      const handleConfirm = (date) => {
    
        hideDatePicker();
        if (isStartingInfoChoosen)
        {
          let option =false;
          setStartingTime(`${date.toLocaleTimeString().slice(0,5)}`);
          setStartingtDate( date.toISOString().slice(0, date.toISOString().indexOf("T")));
          setStartingOption(option);
        }
        if(!isStartingInfoChoosen){
          setEndingTime( `${date.toLocaleTimeString().slice(0,5)}`);
          setEndingDate(date.toISOString().slice(0, date.toISOString().indexOf("T")));
          
        }
      };



      const activateTimePicker = () =>{
        showDatePicker();
  
      }

        return(
            <View>
                <Text >heyy inside TestValue</Text>
                <TouchableOpacity
                    onPress={()=>{
                      setStartingOption(true);
                      showDatePicker();}}

                    style = {styles.button}
                     >
                       {action == 'getInfo' ? <Text>Please click here to choose Starting parking Time and Date</Text> : <Text>Please click here to choose ticket time and date</Text>}
                </TouchableOpacity>

                   <Text style = {styles.text_time_style}> choosen time is: {chosenStartingTime}, chosen date is: {choseStartingnDate}</Text>

                <TouchableOpacity
                    onPress={()=>{showDatePicker();}}
                    style = {action == 'getInfo' ? styles.button: null}
                     >
                        {action == 'getInfo' ? <Text>Please click here to choose Ending parking Time and Date</Text> : null}
                </TouchableOpacity>

                      {action == 'getInfo' ?  <Text style= {styles.text_time_style}> choosen time is: {chosenEndingTime}, chosen date is: {choseEndingnDate}</Text> : null}

               <TouchableOpacity
                    onPress={()=>{ action == 'getInfo' ? setRequestInfo("gta"): setPostInfo();}}
                    style = {styles.button}
                     >
                      {buttoToDisplay != "null" && !showOtherResults ? <Text>{buttoToDisplay} </Text>  : null}
                </TouchableOpacity>

               

                <DateTimePickerModal
                isVisible={isDatePickerVisible}
                mode="datetime"
                onConfirm={handleConfirm}
                onCancel={hideDatePicker}
                />

                
                {response.supplied_information.request_route == "/gta" ? <Text style = {styles.error_Message}>{response.description}</Text> : null}

                <TouchableOpacity
                    onPress={()=>{ action == 'getInfo' ? setRequestInfo("sdl"): null;}}
                    style = {styles.button}
                     >
                        {action == 'getInfo' && showOtherResults && response.supplied_information.request_route != "/sdl"  ? <Text>Click here to get other nearby location to park</Text> : null}
                </TouchableOpacity>

                {response.supplied_information.request_route == "/sdl" && showOtherResults ? <Text style = {styles.error_Message}>{response.description}</Text> : null}

        
            </View>
        );

    

};



styles = StyleSheet.create({
  button:{
    marginTop: 20,
    borderBottomWidth:1,
    marginTop:40,
  },

  error_Message :{
    marginTop: 120,
    fontSize: 20,
    fontWeight: "bold",
    borderBottomWidth: 1,
    borderTopWidth:1,
    padding:10,
  },
  text_time_style:{
    marginTop: 20,
    borderWidth: 2,
    color:'#BE8989',
  },
});

export default TestValue;

import React，{useState，useffect，Component，useReducer}来自“React”；
从“react native”导入{样式表、文本、TouchableOpacity、视图、按钮}；
从“react native Model datetime picker”导入DateTimePickerModel；
从“./api/TicketAnalysis”导入getTicketAnalysis
从“../api/TicketAnalysis”导入TicketAnalysis；
从“react native reanimated”导入{set}；
const TestValue=（道具）=>{
const dateTimeObject=新日期（）；
const current_date=dateTimeObject.toISOString（）.slice（0，dateTimeObject.toISOString（）.indexOf（“T”）；
const current_time=dateTimeObject.toLocaleTimeString（）.slice（0,5）；
const[IsDatePickServices，SetDatePickServices]=useState（false）；
const[chosenStartingTime，setStartingTime]=使用状态（当前时间）；
const[choseStartingnDate，setstartingdate]=使用状态（当前_日期）；
常量[chosenEndingTime，setEndingTime]=使用状态（当前时间）；
const[choseEndingnDate，setEndingDate]=使用状态（当前日期）；
const[IsStartingFochoosen，setStartingOption]=useState（false）；
const[response，setResponse]=useState（{response:''，description:''，percent:-1，提供的_信息：{request_route:''，提供的_参数：{纬度：''，经度：''，日期：''，开始时间：''，结束时间：'}}）；
常量[isPercentDisplayed，setIsPercentDisplayed]=useState（false）；
//const[choosingEndingInfo，setEndingInfo]=useState（false）；
const[showOtherResults，setShowOtherResults]=useState（false）；
让lon_fromScreen=props.navigation.getParam（'longitude'，{}）；
让lat_fromScreen=props.navigation.getParam（'latitude'，{}）；
让action=props.navigation.getParam（'action'，{}）；
让requestInfo={}；
设postInfo={}；
让按钮显示=“”；
如果（操作=='getInfo'）
{
if（response.supplied_information.request_route='/gta'| | response.supplied_information.request_route==''| | showOtherResults==false）
{
按钮显示=“获取票证信息”；
}
其他的
{
butttodisplay=“null”；
}
}
其他的
{
按钮显示=“张贴票证分析信息”；
}
const setRequestInfo=（i_路由）=>{
const display=true；
如果（i_路线==“gta”）
{ 
requestInfo={纬度：从屏幕开始的纬度，经度：从屏幕开始的经度，日期：ChoseStartingDate，开始时间：ChoseStartingTime，结束时间：ChoseEndingTime}；
}
其他的
{
请求信息={纬度：response.supplied_information.supplied_params.纬度，经度：response.supplied_information.经度，日期：response.supplied_information.supplied_params.start_time，end_time:response.supplied_information.supplied_params.end_time，current_loca操作结果：响应百分比}；
}
获取分析（i_路线）；
setIsPercentDisplayed（显示）；
};
常量setPostInfo=（）=>{
postInfo={纬度：lat_fromScreen，经度：lon_fromScreen，日期：choseStartingnDate，时间：chosenStartingTime}；
票证后分析（）；
}
const postTicketAnalysis=async（）=>{
试一试{
const post_response=wait TicketAnalysis.post（'/report'，postInfo）；
const temporary_response=`服务器描述：\n${post_response.data.description}\n\n服务器响应：${post_response.data.response}`；
setResponse（post_response.data）；
}捕捉（错误）{
const err_message={响应：“404坏”，说明：“发生网络错误”}；
setResponse（错误消息）；
}
}
const getTicketAnalysis=异步（i\U路由）=>{
const showtherresultsbutton=true；
试一试{
const get_response=wait TicketAnalysis.get（`/${i_Route}`，{params:requestInfo}）；
setResponse（获取响应数据）；
设置ShowOtherResults（显示其他结果按钮）；
}捕捉（错误）{
const err_message={响应：“404错误”，说明：“发生网络错误”，百分比：-1}；
setResponse（错误消息）；
}
};
常量showDatePicker=（）=>{
常量值=真；
SetDatePickServiceability（值）；
};
常量hideDatePicker=（）=>{
const showtherresultsbutton=false；
SetDatePickServiceability（false）；
设置ShowOtherResults（显示其他结果按钮）；
};
const handleConfirm=（日期）=>{
hideDatePicker（）；
如果（IsStartingFochoosen）
{
让选项=false；
setStartingTime（`date.toLocaleTimeString（）.slice（0,5）}`）；
setStartingDate（date.toISOString（）.slice（0，date.toISOString（）.indexOf（“T”））；
设置启动选项（选项）；
}
如果（！IsStartingFochoosen）{
setEndingTime（`date.toLocaleTimeString（）.slice（0,5）}`）；
setEndingDate（date.toISOString（）.slice（0，date.toISOString（）.indexOf（“T”））；
}
};
常数activateTimePicker=（）=>{
showDatePicker（）；
}
返回(
heyy内部测试值
{
设置开始选项（真）；
showDatePicker（）；}}
style={style.button}
>
{action=='getInfo'？Ple
import React, { useState, useEffect, Component, useReducer } from 'react';
import { StyleSheet, Text, TouchableOpacity, View, FlatList, Button } from 'react-native';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import getTicketAnalysis from "../api/TicketAnalysis"
import TicketAnalysis from '../api/TicketAnalysis';
import { set } from 'react-native-reanimated';


const Item = ({ item, onPress, style }) => (
                 
                 <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
                    <Text style={styles.title}>{item.title}</Text>
                </TouchableOpacity>
  );





const TicketDayAnalysis = (props)=>{
    
    const dateTimeObject = new Date();
    const current_date = dateTimeObject.toISOString().slice(0, dateTimeObject.toISOString().indexOf("T"));
    const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
    const [wantedDate, setWantedDate] = useState(current_date);
    const [selectedId, setSelectedId] = useState("3ac68afc-c605-48d3-a4f8-fbd91aa97f63");
    const [selectedWeather,SetSelectedWeather] = useState("Sunny");
    const choosenLongitude = props.navigation.getParam('longitude',{});
    const choosenLatitude = props.navigation.getParam('latitude',{});
    

    const weatherOptions = [
        {
          id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
          title: "Heat wave",
        },
        {
          id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
          title: "Sunny",
        },
        {
          id: "58694a0f-3da1-471f-bd96-145571e29d72",
          title: "Cloudy",
        },{
            id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28bb",
            title: "Rainy",
          },
          {
            id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f64",
            title: "Stormy",
          },
          {
            id: "58694a0f-3da1-471f-bd96-145571e29d73",
            title: "Windy",
          },
      ];





    

    const showDatePicker = () => {
        const value = true;

        setDatePickerVisibility(value);
        };
       
        const hideDatePicker = () => {
          const showOtherResultsButton = false;
         
          setDatePickerVisibility(false);
        };
       
        const handleConfirm = (date) => {
      
          hideDatePicker();
          setWantedDate(date.toISOString().slice(0, date.toISOString().indexOf("T")));
         
        };

        const renderItem = ({ item }) => {
            const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";
            const result = weatherOptions.filter(item => item.id == selectedId);
            SetSelectedWeather(result[0].title);
            return (
              <Item
                item={item}
                onPress={() => setSelectedId(item.id)}
                style={{ backgroundColor }}
              />
            );
          };


          

    return(

        <View>

            <Text>New Screen</Text>

            <TouchableOpacity
                 onPress={()=>{showDatePicker() }}
                style = {styles.dateOption}
            >
                        <Text style = {styles.textStyle}>please click here to choose the the wanted day</Text>
                    
            </TouchableOpacity>

            <View style={styles.viewStyle}>
                    <TouchableOpacity
                        onPress={()=>{}}
                    >
                        <Text style = {styles.textStyle}>please choose one of the following weather options:</Text>
                    
                    </TouchableOpacity>

                    <FlatList
                        data={weatherOptions}
                        renderItem={renderItem}
                        keyExtractor={(item) => item.id}
                        extraData={selectedId}
                    />

            <Text style ={styles.textInfo}  >choosen information is {wantedDate} : {selectedWeather}</Text>

            </View>

    


        <Button 
                onPress={()=>{props.navigation.navigate('DisplayAnalysis', {wantedDate:wantedDate,id: selectedWeather,longitude:choosenLongitude,latitude:choosenLatitude})}}
                title="Request Ticket day analysis"
                color="#841584"
                />
            


        
            <DateTimePickerModal
                isVisible={isDatePickerVisible}
                mode="date"
                onConfirm={handleConfirm}
                onCancel={hideDatePicker}
                />






        </View>


    );

};




styles = StyleSheet.create({

    dateOption:{
        margin: 20,
        borderWidth:1,
        padding:10,
        backgroundColor:'#456ba8',
    },
    textStyle:{

        fontWeight: "bold"
    },
    item: {
        padding: 10,
        marginVertical: 8,
        marginHorizontal: 16,
        width: 150,
        height: 50,

      },
      title: {
        fontSize: 16,
      },
      viewStyle:{
        width: 400,
        height: 450,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
        backgroundColor:'#456bb8',
        
      },
      textInfo:{
        position:"absolute",
        top:40,
        right:0,
        bottom:0,
        left:200,

      },
});




export default TicketDayAnalysis;