Question

我正在使用react-native-i18n，react-native-popup-menu，react-navigation + expo（但我想尽快退出）。当用户可以选择语言（自动检测或强制：英语，德语等）和一两个其他设置时，我想要创建设置屏幕。

我尝试使用AsyncStorage来存储用户的偏好。当用户更改设置应用程序时，我希望在AsyncStorage和App.js中的状态对象中设置数据（如果需要，刷新主要组件/完整应用程序）。但是使用道具我有问题。

App.js片段：

const navOpt = ({ navigation }) => ({   
  headerStyle: { backgroundColor: 'blue', elevation: null },
  headerRight: (<Menu>
    <MenuTrigger><MyIcon name="more" /></MenuTrigger>
    <MenuOptions>
      <MenuOption onSelect={() => navigation.navigate('Settings')} text='Settings' />
    </MenuOptions>
  </Menu>),
 });

const RootNav = StackNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen }
}, {
  navigationOptions: navOpt
});


export default class App extends Component {
  constructor(props) {
    super(props);      
    this.langHandler = this.langHandler.bind(this);

    this.state = {
      isLoadingComplete: false,
      currentLang: '',
      selectedLang: null,
      selectedTheme: null
    };
   }

  async componentWillMount() {    
    try {
    AsyncStorage.multiGet(['lang', 'theme'],   (err, stores) => {
        this.setState({ selectedLang: stores[0].lang });
        this.setState({ selectedTheme: stores[0].theme });    
    });
    } catch (e) {
      console.log(e);
      return;
    }

   try {
      await I18n.initAsync();
    } catch (e) {
      console.log(e);
      return;
    }
    console.log(this.state.selectedLang);
    if (this.state.selectedLang != null && this.state.selectedLang !== '') {
        this.setState({ currentLang: this.state.selectedLang });
        } else {
        this.setState({ currentLang: I18n.locale });
        }
    this.setState({ isLoadingComplete: true });   
    console.log(this.state);
  }

  langHandler(lang) {
    console.log(`xx${lang}`);
    this.setState({
        isLoadingComplete: false
    });
}

  render() {
  if (this.state.isLoadingComplete) return (<MenuProvider><RootNav /></MenuProvider>);
    return <View />;
  }
}

SettingsScreen.js - 这是最简单的版本：

import React, { Component } from 'react';
import { StyleSheet, View, Button, TextInput, AsyncStorage } from 'react-native';

class SettingsScreen extends Component {
  static navigationOptions = {
    title: 'Settings',
  };
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
  }
    saveData() {
      AsyncStorage.setItem('lang', this.state.text);
      this.props.langHandler(this.state.text);
    }
    render() {
      return (
        <View style={styles.container}>
          <View>
              <TextInput onChangeText={(text) => this.setState({ text })} />
             <Button title='set' onPress={() => this.saveData()} />
          </View>
        </View>
      );
    }
  }

我尝试设置类似

的内容

 const RootNav = StackNavigator({
      Home: { screen: HomeScreen },
      Settings: { screen: props => <SettingsScreen (...props) />}

但是不能工作。也许我需要使用Redux？但如果有可能避免这样更好:) 也许我应该以不同的方式做所有事情？

感谢您的时间。最诚挚的问候

Answer 1

您要找的是screenProps。您必须将RootNav添加到render() { const screenProps = { langHandler: this.langHandler, }; if (this.state.isLoadingComplete) { return ( <MenuProvider> <RootNav screenProps={screenProps} /> </MenuProvider>); } return <View />; } screenProps。

langHandler

然后您就可以使用this.props.screenProps.langHandler

中的SettingsScreen访问

saveData() {
  AsyncStorage.setItem('lang', this.state.text);
  this.props.screenProps.langHandler(this.state.text);
}

了

public void onClick(View v) {
Point origin = originPosition;
Point destination = destinationPosition;

String awsPoolId = null;
boolean simulateRoute = true;

NavigationViewOptions options = NavigationViewOptions.builder()
  .origin(origin)
  .destination(destination)
  .awsPoolId(awsPoolId)                
  .profile(DirectionsCriteria.PROFILE_WALKING) //THIS LINE BREAKS CODE (Error:(179, 33) error: cannot find symbol method profile(String))
  .shouldSimulateRoute(simulateRoute)
  .build();

  NavigationLauncher.startNavigation(MainActivity.this, options);
}

在子组件中运行父组件中的函数 - React Navigator屏幕没有redux

1 个答案: