Невозможно передать ввод данных в текстовое поле с одного экрана на другой. Реагировать родной - PullRequest
Новая
       29

Невозможно передать ввод данных в текстовое поле с одного экрана на другой. Реагировать родной

0 голосов
/ 17 января 2019

Это мой главный экран 

        class HomeScreen extends React.Component {
        constructor(props) {
        super(props);
        this.state = {username: null, password: null, isPasswordHidden: true, toggleText: 'Show'};
      }

      handleToggle = () => {
        const { isPasswordHidden } = this.state;

        if (isPasswordHidden) {
          this.setState({isPasswordHidden: false});
          this.setState({toggleText: 'Hide'});
        } else {
          this.setState({isPasswordHidden: true});
          this.setState({toggleText: 'Show'});
        }
      }

      //Validate() to check whether the input username is in Mail format
      validate = (inputValue) => {
        let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ; // Regex for Emails
        // let reg = /^(\+\d{1,3}[- ]?)?\d{10}$/; // Regex for phone numbers
        return reg.test(inputValue);
      }
      clearText(fieldName) {
        this.refs[fieldName].clear(0);
      }

      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}></Text>


            <TextInput
              ref={'input1'}
              style={styles.input}
              placeholder="Username"
              onChangeText={value => this.setState({username: value})}

            />

            <TextInput
              ref={'input2'}
              style={styles.input}
              placeholder="Password"
              maxLength={10}
              secureTextEntry={this.state.isPasswordHidden}
              onChangeText={value => this.setState({password: value})}

            />

            <TouchableOpacity
              onPress={this.handleToggle}
            >
              <Text>{this.state.toggleText}</Text>

            </TouchableOpacity>

            <View style={{padding: 20}}>
              <TouchableOpacity onPress={() => {

                if (!this.validate(this.state.username)) {
                  Alert.alert("Invalid");
                  Keyboard.dismiss();
                } else if (this.state.username === 'vinay@gmail.com' && this.state.password === 'password') {

Здесь я передал параметры на следующий экран, где я хочу отобразить значения, которые я ввел в поле textInput. Но это не отображается на следующем экране. Я не знаю почему. Это работало нормально, когда я добавил обычный навигатор стека без какой-либо навигации по ящикам и все такое. 

                  this.props.navigation.navigate('Welcome', {
                    u_name: this.state.username,
                    p_word: this.state.password,
                  });
                  Keyboard.dismiss();
                  this.clearText('input1');
                  this.clearText('input2');
                } else if (this.state.username === null && this.state.password === null) {
                  Alert.alert("Invalid");
                } else {
                  Alert.alert("Login Failed");
                  this.clearText('input1');
                  this.clearText('input2');
                  Keyboard.dismiss();
                }

              }}>
                <View style={styles.button}>
                  <Text style={styles.buttonText}>LOGIN</Text>
                </View>
              </TouchableOpacity>
            </View>

          </View>
        );
      }
    }

Это мой экран приветствия

Здесь я извлек значения из предыдущего экрана и сохранил их в переменной. Сейчас печатается имя пользователя: имя и пароль: слово 

 class WelcomeScreen extends Component {
    render() {
    const { navigation } = this.props;
    const u_name = navigation.getParam('username', 'name');
    const p_word = navigation.getParam('password', 'word');
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>WELCOME</Text>
        <Text>USERNAME: {JSON.stringify(u_name)}</Text>
        <Text>PASSWORD: {JSON.stringify(p_word)}</Text>
      </View>
    );
  }
}

Навигаторы 

const WelcomeTabNavigator = createBottomTabNavigator({
  Welcome: {screen: WelcomeScreen},
  Profile,
  Settings,
}, 
{
  navigationOptions:({navigation}) => {
    const {routeName} = navigation.state.routes[navigation.state.index];
    return {
      headerTitle: routeName
    };
  }
})

const WelcomeStackNavigator = createStackNavigator({
  WelcomeTabNavigator: WelcomeTabNavigator
},
{
  defaultNavigationOptions:({navigation}) => {
    return {
      headerLeft: (
        <Icon 
          style={{paddingLeft: 20}}
          onPress={() => navigation.openDrawer()}
          name="md-menu" 
          size={30}
        />
      )
    };
  }
})

const AppDrawerNavigator = createDrawerNavigator({
  Welcome: {screen: WelcomeStackNavigator}
},
{
  contentComponent:(props) => (
    <View style={{flex:1}}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
            <Button 
              title="Logout" 
              onPress={() => {

                props.navigation.navigate('Home')
              }}
            />
        </SafeAreaView>
    </View>
  ),
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
})

const AppSwitchNavigator = createSwitchNavigator({
  Home: {screen: HomeScreen},
  Welcome: {screen: AppDrawerNavigator}
});

const AppContainer = createAppContainer(AppSwitchNavigator);

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Я понял. Это проблема с разделом навигатора. Я изменил это 

   const AppSwitchNavigator = createSwitchNavigator({
  Home: {screen: HomeScreen},
  Welcome: {screen: AppDrawerNavigator}
});

к этому 

  const AppSwitchNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Welcome: {screen: AppDrawerNavigator}
});

Когда вы добавляете переключатель навигатор, он сбрасывает предыдущий экран, теряя тем самым входное значение.

0 голосов
/ 17 января 2019

Я думаю, вы должны использовать u_name insted из username в getParam

Ваш код const u_name = navigation.getParam('username', 'name');

Новый код const u_name = navigation.getParam('u_name', 'name');

То же самое для пароля

Или вы можете использовать такой метод навигатора и не изменять метод getParam

this.props.navigation.navigate('Welcome', { username: this.state.username, password: this.state.password, });

...