状态更新后,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,则颜色将更新。 因此,我认为状态更改时不会重新渲染屏幕。