reactjs – 如何重新渲染React Native中的所有内容

在反应中有一种叫做forceUpdate的方法.虽然听起来像你正在寻找的东西,但使用它并不是一个很好的做法.

来自反应文件;

By default,when your component’s state or props change,your
component will re-render. If your render() method depends on some
other data,you can tell React that the component needs re-rendering
by calling forceUpdate().

Calling forceUpdate() will cause render() to be called on the
component,skipping shouldComponentUpdate(). This will trigger the
normal lifecycle methods for child components,including the
shouldComponentUpdate() method of each child. React will still only
update the DOM if the markup changes.

Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().

我认为你应该做的是在你的应用程序中创建一个主题逻辑并相应地更改主题.

例

// styles.js
const styles = {
  button: {
    blue: {
      backgroundColor: 'blue'
    },red: {
      backgroundColor: 'red'
    },green: {
      backgroundColor: 'green'
    }    
  }
};

export default styles;

// Dumb component example
import styles from './styles';

const Button = (props) => {
  return <Button {...props} style={[props.style,styles.button[props.theme]]} />
};

// Complex component example
import styles from './styles';

export default Button extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {style,theme} = this.props;
    return <Button {...this.props} style={[style,styles.button[theme]]} />
  }
}

// usage in another component
import React,{ Component } from 'react';
import { Text,View,StyleSheet } from 'react-native';
import Button from './components/Button'; // Custom button component
import styles from './styles';

export default App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url. You get a new url each time you save.
        </Text>
        <Button theme="blue" {/* other Button component props */} />
      </View>
    );
  }
}

在我的例子中,我使用定义为硬编码对象的样式.您可以向其添加API调用和套接字通信逻辑.

在示例中,不是将完整样式对象从一个组件/屏幕传递到另一个组件/屏幕,我只需简单地传递主题名称,主题道具上的任何更改都将强制组件从样式常量中获取新样式对象.

不需要为每个对象设置主题.您可以在对象中使用更高的属性.

例

const styles = {
  id5248698745: {
    button: {
      backgroundColor: 'green'
    },label: {
      color: 'yellow',fontSize: 18
    },paragraph: {
      color: 'red',fontSize: 19
    },headings: {
      color: 'wihte',fontSize: 24
    }
  }
};

// ...
render() {
    const {style,styles[theme].button]} />
}

// ...
// <Button theme={this.props.themeId} {/* other Button component props */} />