将对象数据获取到标题中（反应原生）

Question

我想把我的对象数据放到标题中。我在 componentWillMount() 中解析对象数据并将其存储在 navigation.setParams(userJSON: object) 中。

我的问题是如果我只是将它打印为 JSON.stringify(object)，我可以在标题中看到数据，但是当我想将它显示为 object.name 时出现问题..

我的代码：

componentWillMount() {
    const {
        setParams
    } = this.props.navigation;

    AsyncStorage.getItem('user', (err, result) => {
        this.setState({
            user: JSON.parse(result),
        });

        var obj = JSON.parse(result);

        this.props.navigation.setParams({
            userJSON: obj,
        });

    });

}

标题：

static navigationOptions = ({ navigation }) => ({
    headerTitle: "Tab1",
    headerLeft: (
        <View style={styles.oval}>
            <Text>{JSON.stringify(navigation.getParam('userJSON'))}</Text>
        </View>
    ),
    headerRight: (
      <View style={styles.headerRight}>
        <TouchableOpacity
            title="Ok"
            onPress={() => navigation.navigate('MyProfil')}>
            <View style={styles.circle}>
                <Text style={styles.txtInside}>
                {
                    navigation.getParam('userJSON').name + ''
                    + navigation.getParam('userJSON').lastname
                }
                </Text>
            </View>
        </TouchableOpacity>
      </View>
    )
});

我的对象是：

{
    id:86163
    lastname:Api
    name:Api
    email:api@eeee.com
    user:api
}

Answer 1

navigation 对象有一个state 属性。

您可以通过以下方式访问userJson：

navigation.state.params.userJSON

在屏幕初始加载时，如果没有参数，params 对象可以是null，所以最好设置一个小验证：

static navigationOptions = ({ navigation }) => ({
    headerTitle: "Tab1",
    headerLeft: {
        let username = '';
        const { state } = this.props.navigation;

        if (state.params) {
            username = state.params.userJSON.name;
        }

        return (
            <View style={styles.oval}>
                <Text>{username}</Text>
            </View>
        )
    },
    headerRight: (
      ...
    )
});

您可以查看以下issue。

Answer 2

我是这样实现的 我还尝试从 AsyncStorage 获取数据并设置标题标题。 所以我的标题看起来像这样

 static navigationOptions =({navigation,screenProps})=> ({
 title:typeof(navigation.state.params)==='undefined' || 
 typeof(navigation.state.params.title) === 'undefined' ? 'Loading': 
 navigation.state.params.title,
 headerTitleStyle: {textAlign:"center",alignSelf:"center"},


});

在 componentDidMount() 中你可以像这样设置参数。

var names = await AsyncStorage.getItem('names')
var conames =JSON.parse(names)
var name1 = conames[2]
this.props.navigation.setParams({ title: name1 })

Answer 3

您可能会为此目的使用 REDUX。希望此链接对您有所帮助。

https://reactnavigation.org/docs/en/redux-integration.html