Question

我正在尝试创建一个应用程序，当按下按钮时，它会加载一个随机屏幕。

const Slides = [Slide0, Slide1, Slide2, Slide3, Slide4, Slide5];

randomNumber = Math.floor(Math.random() * 6);

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      randomNumber: 1,
    };
  }

  _onPressButton = () => {
    randomNumber = Math.floor(Math.random() * 6);
    this.setState({randomNumber: randomNumber});
    this.props.navigation.navigate('NextScreen');
  }

  static navigationOptions = {
        header: null,
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
      <Image
        source={require('./assets/icons/app-icon.png')}
        style={{width: 50, height: 50}}
      />
        <Text style={{ marginTop: 100 }}>Welcome to Dementia Care Activities.</Text>
        <Text>Next slide should be: {this.state.randomNumber}</Text>
        <Text>{randomNumber}</Text>
        <Button
          onPress={this._onPressButton}
          title="Get New Activity"
        />
      </View>
    );
  }
}

const SimpleAppNavigator = StackNavigator({
  Home: { screen: HomeScreen },
  NextScreen: { screen: Slides[randomNumber] }
});

const AppNavigation = () => (
  <SimpleAppNavigator  />
);

export default class App extends React.Component {
  render() {
    return (
        <AppNavigation/>
    );
  }
}

这里的问题是，当单击按钮时，randomNumber的值永远不会再次更新，但_onPressButton中的其余代码会按预期运行。

当我重新加载应用时，我为randomNumber获得了一个不同的随机分配值，但之后无法覆盖该值。

如何更新价值？

Answer 1

如果要更新渲染函数中的变量，则需要声明状态。如果你想要这一行

<Text>{randomNumber}</Text>

在渲染中

反映新的随机数，然后你需要使用

<Text>{this.state.randomNumber}</Text>

代替。如果这不是您想要的，请告诉我:)。

Answer 2

试试这个：

this.props.navigation.navigate('NextScreen', randomNumber);

处理变量本身的反应

2 个答案: