react-native-router-flux：能否在Scene组件中传递props？

嘿，这个问题问得很实用！答案是完全支持直接在Scene组件里传递自定义props，不过写法不是你示例里的props={text: 'Test'}，而是直接把要传递的props作为Scene的属性写进去就好，很简单～

基础用法示例 #

比如你想传递text: 'Test'给Page1Container，直接这么写：

<Scene 
  key="page1" 
  component={Page1Container} 
  title="Page 1" 
  text="Test" // 直接把自定义props作为Scene的属性添加
/>

然后在你的Page1Container组件里，就能通过props直接拿到这个值：

// Page1Container.js
const Page1Container = (props) => {
  return (
    <View>
      <Text>传递的文本：{props.text}</Text>
    </View>
  );
};

传递复杂数据或函数 #

如果需要传递对象、数组甚至函数，也可以直接传，没有限制：

<Scene 
  key="page1" 
  component={Page1Container} 
  title="Page 1" 
  userInfo={{ name: 'Fire Hand', role: 'Developer' }}
  onBackPress={() => console.log('用户点击了返回')}
/>

组件里接收：

const Page1Container = (props) => {
  return (
    <View>
      <Text>用户名：{props.userInfo.name}</Text>
      <Button title="返回" onPress={props.onBackPress} />
    </View>
  );
};

和Actions.key()传props的区别 #

这里顺便区分下两种传参方式的不同：

• 直接在Scene里定义的是静态props：不管什么时候跳转到这个页面，这些值都是固定的；
• 通过Actions.page1({ text: '动态文本' })传递的是动态props：每次跳转可以传不同的值，而且会覆盖Scene里定义的同名静态props（如果存在的话）。

可选：分组自定义props（更清晰） #

如果你担心自定义props和Scene的内置属性（比如title、key）混淆，可以把所有自定义props包在一个对象里：

<Scene 
  key="page1" 
  component={Page1Container} 
  title="Page 1" 
  customProps={{ 
    text: 'Test', 
    anotherProp: '这是另一个自定义属性' 
  }}
/>

组件里这样取：

const Page1Container = (props) => {
  return (
    <View>
      <Text>{props.customProps.text}</Text>
      <Text>{props.customProps.anotherProp}</Text>
    </View>
  );
};

内容的提问来源于stack exchange，提问作者Fire Hand