这是我第一次使用 MobX,所以这可能是一个比我想象的更简单的问题,但我尝试过的东西没有任何错误;无论我在哪里尝试使用商店,商店都是未定义的。我试过将商店直接导入组件并从主文件传递道具(也使用 ,但我不确定我是否正确使用)。我也尝试了几种不同的 .babelrc 文件设置,但这似乎不是问题。
这是用户存储:
import React from 'react';
import { observable } from 'mobx';
class UserStore {
@observable info = {
username: "bob",
password: "secret",
email: "bob@email.com"
}
}
const userStore = new UserStore()
export default userStore;Run Code Online (Sandbox Code Playgroud)
这是一个简化的 App.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Profile from './app/Profile.js';
import { UserStore } from './app/UserStore.js';
export default class App extends Component {
constructor(){
super();
this.state = {
page: 'Profile', …Run Code Online (Sandbox Code Playgroud)我正在尝试从一组数据中呈现ScrollView组件中的项目列表,但由于某种原因,这些项目没有显示,或者根本没有呈现!?从下面的例子中可以<SomeOtherComponent />看出,当它前面应该有三个橙色方块时(假设this.state.test是一个数组,比方说[0, 1, 2]).我究竟做错了什么?
<ScrollView
style={{flex: 1}}
contentContainerStyle={{width: '100%', alignItems: 'center'}}>
{this.state.test.map((item, index) => {
<View style={{height: 50, width: 50, backgroundColor: 'orange', marginBottom: 10}} />
})}
<SomeOtherComponent />
</ScrollView>Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>Run Code Online (Sandbox Code Playgroud)