1

我有两个屏幕，A 和 B。屏幕 A 只包含一个 react-native-paper TextInput，例如，

            <View>
                <TextInput
                    error={error}
                    label='Enter something'
                    mode='outlined'
                    onBlur={this.onBlurHandler}
                    onChangeText={text => this.setState({text})}
                    value ={this.state.text}
                />
            </View>

在上述情况下，当我从屏幕 A 移动到屏幕 B 时，如果我按下返回屏幕 A，TextInput 的值就会消失，尽管this.state.text我在屏幕 A 上填写的数据都是如此。

如果我对值进行硬编码，那么它在从 A 导航到 B 然后返回 AEg 后仍然保留，

    <View>
        <TextInput
            error={error}
            label='Enter something'
            mode='outlined'
            onBlur={this.onBlurHandler}
            onChangeText={text => this.setState({text})}
            value ={'Hello World'}
        />
    </View>

请告诉我，当我从屏幕 B 移动到屏幕 A 时，如何确保 TextInput 的值保持不变。非常感谢！

4

2 回答 2

0

根据您所说的，屏幕 A 没有卸载，即使值this.state.text保持不变，图形上的值也已被清空。就我而言，它按预期工作。

屏幕A

import React, { Component } from "react";
import { TextInput } from "react-native-paper";

export default class ScreenA extends Component {
    constructor(props) {
        super(props);
        this.state = { text: "" };
    }
    render() {
        return (
            <TextInput
                error={false}
                label="Enter something"
                mode="outlined"
                onChangeText={text => this.setState({ text })}
                onBlur={() => this.props.navigation.navigate("ScreenB")}
                value={this.state.text}
            />
        );
    }
}

屏幕B

import React, { Component } from "react";
import { Text, View } from "react-native";

export default class LoadingScreen extends Component {
    render() {
        return (
            <View>
                <Text> ScreenB </Text>
            </View>
        );
    }
}

航海家

const RoutesConfig = {
    ScreenA: {
        screen: ScreenA,
    },
    ScreenB: {
        screen: ScreenB,
    }
};

const StackNavigatorConfigs = {
    initialRouteName: "ScreenA",
};

export default createStackNavigator(RoutesConfig, StackNavigatorConfigs);

在我写我需要的任何东西时，然后在触发ScreenA时导航到 ScreenB 。使用 StackNavigator 的i 导航回来，该值仍然保存并显示在.TextInputonBlurHeaderTextInput

如果该值仍然保存在state（如果我理解正确的话）中，您可以withNavigationFocus使用react.navigation. 使用它，您可以查看该值是否实际存储，并查看触发重新渲染是否会以图形方式显示该值。

例如，使用我的ScreenA示例：

import React, { Component } from "react";
import { TextInput } from "react-native-paper";
import { withNavigationFocus } from "react-navigation";

class ScreenA extends Component {
    constructor(props) {
        super(props);
        this.state = { text: "" };
    }

    componentDidUpdate = (prevProps) => { 
        if ( prevProps.isFocused === false && this.props.isFocused === true ){
            this.setState({ text : this.state.text })
        }
    }

    render() {
        return (
            <TextInput
                error={false}
                label="Enter something"
                mode="outlined"
                onChangeText={text => this.setState({ text })}
                onBlur={() => this.props.navigation.navigate("ScreenB")}
                value={this.state.text}
            />
        );
    }
}

export default withNavigationFocus(ScreenA);
于 2020-01-31T09:00:52.030 回答
0

我通常使用 redux 来存储有助于这种情况的值。还原_ _

//reducers/inputReducer.js
import {
   UPDATE_INPUT
} from '../actions'

const initialState = {
   input = null
}

function input(state = initialState, action) {
    switch (action.type) {
        case UPDATE_INPUT: {
           return {
               ...state,
               input = action.value
           }
        }
        default:
            return state;
    }
}
export default input

//input.js
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { updateInput } from './actions.js'
...
<TextInput
            error={error}
            label='Enter something'
            mode='outlined'
            onBlur={this.onBlurHandler}
            onChangeText={text => this.props.updateInput(text)}
            value ={this.props.input}
        />
...
function mapStateToProps(state) {
    return {
        input: state.input
    }
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators(
        {
           updateInput
        },
        dispatch
    );
}

export default connect(mapStateToProps, matchDispatchToProps)(input);

//actions.js

export const UPDATE_INPUT = "UPDATE_INPUT";
export function updateInput(value) {
    return {
        type: UPDATE_INPUT,
        value: value
    }
}

注意，你仍然需要设置 store 和 reducer，

编辑：setup redux 的其他部分（希望我没有错过任何东西）

//store.js
import { createStore } from 'redux';
import combineReducers from './reducers';

const store = createStore(combineReducers);

export default store;

//reducers/index.js
import { combineReducers } from 'redux';
import input from './inputReducer';

export default combineReducers({
  input
});

//index.js

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
于 2020-01-31T04:42:45.040 回答