Question

所以我正在尝试使用可重用的组件。这是脚本Button.js

import React, {Component} from 'react';
import {TouchableOpacity, Text} from 'react-native';
import styles from '../components/styles';

class MyButton extends React.Component {
  constructor(props) {
    super(props);
    this.onPress = this.props.onPress;
    this.title = this.props.title;
  }
  render() {
    return (
      <TouchableOpacity
        onPress={this.onPress}
        style={styles.appButtonContainer_login}>
        <Text style={styles.appButtonText}>{this.title}</Text>
      </TouchableOpacity>
    );
  }
}

export default MyButton;

这是我的app.js

const App = () => {
  setInterval(() => RNBootSplash.hide(), 1000);
  return <MainStackNavigator />;
};

export default App;

我的MainStackNavigator

const Stack = createStackNavigator();
function MainStackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          options={{headerShown: false}}
          component={WelcomeScreen}
        />
        <Stack.Screen
          name="Login"
          options={{headerTitleAlign: 'center', headerLeft: null}}
          component={LoginScreen}
        />
        <Stack.Screen
          name="Register"
          options={{headerTitleAlign: 'center', headerLeft: null}}
          component={RegisterScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default MainStackNavigator;

这是我的WelcomeScreen

export default function WelcomeScreen({navigation}) {
  const handle_navigation = (name) => {
    navigation.navigate(name);
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Image
          style={styles.header_image}
          source={require('../assets/bootsplash_logo.png')}
        />
        <Text style={styles.headline}>Welcome</Text>
        <Text style={styles.subtitle}>Ini lagi belajar react native</Text>
      </View>

      <View style={styles.button_container}>
        <MyButton onPress={handle_navigation('Login')} title="Login" />
        <MyButton onPress={handle_navigation('Register')} title="Register" />
      </View>
    </View>
  );
}

我运行它时收到此错误消息

警告：无法从组件的功能主体内部更新组件不同的组件。

当我从MyButton中删除WelcomeScreen时，没有错误。所以我认为多数民众赞成在一个导致错误。我该如何解决？

Answer 1

onPress / MyButton的{{1}}道具需要传递一个函数变量。但是，您正在传递函数调用TouchableOpacity的结果，该结果无效。

一个简单的解决方法是更改handle_navigation使其返回一个函数：

handle_navigation

您还可以将箭头功能直接传递给const handle_navigation = (name) => { return () => navigation.navigate(name); };道具，恕我直言更清晰：

onPress

Answer 2

您应该在MyButton中使用功能组件而不是类组件喜欢

import React, {Component} from 'react';
import {TouchableOpacity, Text} from 'react-native';
import styles from '../components/styles';

const MyButton = props => {
  return (
    <TouchableOpacity
      onPress={props.onPress}
      style={styles.appButtonContainer_login}
    >
      <Text style={styles.appButtonText}>{props.title}</Text>
    </TouchableOpacity>
  );
}

export default MyButton;

也许这会对您有所帮助。

并在欢迎屏幕上

<MyButton onPress={() => handle_navigation('Login')} title="Login" />
<MyButton onPress={() => handle_navigation('Register')} title="Register" />

可重用组件的原因警告：无法从其他组件的功能体内更新组件

2 个答案: