Блог

Итак, я пытаюсь использовать повторно используемый компонент. Вот сценарий 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 , ошибки нет. Поэтому я думаю, что это одна из причин ошибки. Как я могу это исправить?

Для onPress поддержки MyButton / TouchableOpacity требуется передать ему функциональную переменную. Однако вы передаете результат вызова функции handle_navigation , который является недействительным.

Простое исправление — изменить handle_navigation , чтобы он возвращал функцию:

 const handle_navigation = (name) => {
  return () => navigation.navigate(name);
};
  

Вы также можете передать функцию со стрелкой непосредственно в onPress prop, что, по-моему, немного понятнее:

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

Вам нужно использовать функциональный компонент, а не компонент класса в 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" />