Question

当我单击另一个屏幕上的按钮时，我想将屏幕的title设置为特定值。

因此，我最后想要实现的是以下内容。从我的HomeScreen到ChangeScreen，我可以在其中保存用户个人资料。现在，在该屏幕上，当用户提交其name时，该名称应显示在例如标题中。

我仍然想念数据从ChangeScreen传输到App.js的那部分。

我已经找到了非常相似的问题，但是我无法应用这些解决方案：

找到我的小吃here。

App.js

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

import Home from './components/HomeScreen';
import Change from './components/ChangeScreen';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
const Stacks = createStackNavigator();
 
class App extends React.Component {
  state = {
    newtitle : 'foo'
  }
  
  handleLoginnameChange = newtitle => {
    this.setState({ newtitle })
  }

  render() {
    return (
      <NavigationContainer>
        <Stacks.Navigator
          headerMode="screen"
          screenOptions={{
            //headerTitle: this.state.newtitle,
            //headerTitle: props => <Change {...props} />
          }}
        >
        <Stacks.Screen
          name="home"
          component={Home}
          options={
            { 
              title: 'Home'
            }
          }
        />
        <Stacks.Screen
          name="change"
          component={Change}
          options={
            { 
              title: 'Change' 
            }
          }
        />
        </Stacks.Navigator>
      </NavigationContainer>
    );
  }
}

export default (App);

HomeScreen.js

import React from 'react'
import { Button, Text, View } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    return (
      <View> 
        <Text>Hi, this is a test of change the title from another component</Text>
        <Button title='To the Change title screen' onPress={() => this.props.navigation.navigate('change')}>Change</Button>
      </View>
    ); 
  }
}
export default HomeScreen;

ChangeScreen.js

import React from 'react'
import { Button, Text, View } from 'react-native';

class ChangeScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Clicking this button will change the Header title to "TEST" and going back to Home.</Text>
        <Button title='Save' onPress={() => this.props.navigation.navigate('home')}>Home</Button>
    // on that button I need the setState or something similar like a onChange or onClick handler
      </View>
    );
  }
}
export default ChangeScreen;

如何通过单击子组件中的按钮来设置父项的道具

0 个答案: