状态更新后,导航页面不会更新

时间:2020-07-21 15:43:18

标签: react-native navigation expo

状态更新后,expo的库'@ react-navigation / native'不会更新我的屏幕 我的代码

import 'react-native-gesture-handler';
import React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { ColorPicker } from 'react-native-color-picker';
import VerticalSlider from 'rn-vertical-slider-gradient';

const Stack = createStackNavigator();

type State = {
  PickedColor: string
}

class App extends React.Component<State> {
  constructor(props) {
    super(props);
    this.DevicesScreen=this.DevicesScreen.bind(this)
    this.ChangeColorScreen=this.ChangeColorScreen.bind(this)
    this.HueToHEX=this.HueToHEX.bind(this)
    this.UpdateColor=this.UpdateColor.bind(this)
    this.state = {
      PickedColor: "#FF0000"
    };
  }

  HueToHEX(Hue: number) {
    //Some Code to go from [X°] to hex
  }

  DevicesScreen({ navigation }) {
    return(
      <View>
        <Text>
            Try editing me! ?
        </Text>
        <Button
          title="Go to Color"
          onPress={() => navigation.navigate('ChangeColor')}
        />
      </View>
    );
  }

  UpdateColor(color) {
    var HEX =  this.HueToHEX(color.h);
    this.setState({
      PickedColor: HEX
    })
    console.log(HEX);
  }

  ChangeColorScreen() {
    return(
      <View>
        <View style={{flexDirection:'row'}}>
          <ColorPicker
            onColorChange={color => this.UpdateColor(color)}
          />
          <VerticalSlider
            minimumTrackTintColor={"#FFFFFF"}
            maximumTrackTintColor={this.state.PickedColor}
            //some more settings
          />
        </View>
        <Text>
          {this.state.PickedColor}
        </Text>
      </View>
    );
  }

  render() {
    const {PickedColor} = this.state;
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Devices">
          <Stack.Screen name="Devices" component={this.DevicesScreen}/>
          <Stack.Screen name="ChangeColor" component={this.ChangeColorScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

export default App;

因此,当颜色选择器更新时,它将颜色写入this.state.PickedColor

onColorChange={color => this.UpdateColor(color)}

因此,我希望将其更改为pickedcolor颜色,但不要更改。 但是,如果我返回到DevicesScreen,然后再回到ChangeColorScreen,则颜色将更新。 因此,我认为状态更改时不会重新渲染屏幕。

0 个答案:

没有答案